React Dejank

Asynchronously loading components with conditional rendering can lead to a janky UI experience if you are not careful. React Dejank is a development utility for fixing this problem. You should not use React Dejank in production.

Janked

Dejanked

NOTE

This library is meant to be required, used, then removed. It's for the ability to see what your component looks like rendered or not rendered in real time, clean up jank, then removed entirely.

Install

NPM

npm install --save-dev react-dejank

Yarn

yarn add --dev react-dejank

Native

// User.js

import React from 'react';
import { StyleSheet, Text } from 'react-native';
import dejank from 'react-dejank';

const styles = StyleSheet.create({
  text: {
    fontSize: 18
  }
});

class User extends React.Component {

  constructor() {
    super();
    this.state = {
      user: {},
    }
  }

  componentWillMount() {
    this.fetchUser()
  }

  componentWillReceiveProps() {
    this.fetchUser()
  }

  // simulate a request
  fetchUser() {
    setTimeout(() => {
      this.setState({
        user: {
          name: this.props.username
        }
      })
    }, 2000)
  }

  render() {

    // add dejank to any existing conditional rendering.
    // the dejank prop will toggle between true and false on an interval.
    if (this.state.user.name && this.props.dejank) {
      return (
        <Text style={styles.text}>
          The username is {this.state.user.name}
        </Text>
      )
    } else {
      return null;
    }
  }
}

// The first argument is the component to dejank
// The second argument is an optional amount of time in milliseconds between updates
export default dejank(User, 3000);

// App.js

import React from 'react';
import { StyleSheet, ScrollView, TextInput } from 'react-native';
import User from './User';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 1,
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: -150
  },
  text: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    margin: 20,
    padding: 5,
    borderRadius: 5,
  }
});

export default class App extends React.Component {

  constructor() {
    super();
    this.state = {
      username: 'timurtu'
    }
  }

  render() {
    return (
      <ScrollView contentContainerStyle={styles.container}>
        <User username={this.state.username} />

        <TextInput
          style={styles.text}
          onChangeText={username => this.setState({ username })}
          value={this.state.username}
        />
      </ScrollView>
    );
  }
}