about · lately · live · notes · talks · writing · contact · thanks · support ·


React

Tooling

Testing

Snapshots

Conditional Rendering

State

Don’t reach for redux by default. Have a read of Lifting State Up on the React website.

Performance

Don’t allocate what you don’t need to in the component render path. Move everything you can out into consts and these functions can take the props interface.

JSX

Pure Functional

If you are staring at your screen you need a lambda.

export const Header = (props) => (
        <Text testID="ui-header-text" style={ styles.content }>
            { props.text }
        </Text>
);

Class

class Header extends Component {
  render() {
    return (
        <Text testID="ui-header-text" style={ styles.content }>
            { this.props.text }
        </Text>
    );
  }
}

Component Lifeycles

ComponentWillMount

ComponentWillUnmount

ComponentWillReceiveProps