Be wary of that shallowEqual

Given that shallowEqual function is being used in conjunction with React’s shouldComponentUpdate hook a lot these days, this tip might be of help. shallowEqual is a function that checks whether two objects are equal based on the first level of key <-> value pairs. That is, the following would result in true:

const one = { a: 1 };
const two = { a: 1 };
shallowEqual(one, two) // => true

Whereas, the following will result in false:

const one = { a: { b: 1 } };
const two = { a: { b: 1 } };
shallowEqual(one, two) // => false

If the value of any key is an object or a function (UPDATE: I’ve added some more information on this case here), the response will be false. A common mistake that you might be doing is use a shouldComponentUpdate function with shallowEqual comparison function, but pass a callback as a prop. For example:

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps) {
    return !shallowEqual(this.props, nextProps);
  }
}

// Somewhere else:

<MyComponent onClick={handleOnClick} {...rest} />
// Assume that the value of `deepObject` is an object that's > 1 level
// deep.
const deepObject = { a: { b: 2 } };
<MyComponent {...rest} deepObject={deepObject}/>

Since one of the props in the above code is a function or a complex object that’s getting passed from the parent, the child’s (MyComponent) shouldComponentUpdate will always return true, which in turn triggers a re-render of the component, and all its children. This is particularly problematic when this component has a deeply nested structure. Do watchout for this pattern. Note that this is not exactly a problem with the implementation of the function, but the way it’s used.

In the current codebase I’m working on, there are two utilility functions omit and pick that work on objects similar to how the identically named functions in Lodash work. I’ve started using these to filter out props to include just the ones I need. For example:

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps) {
    const filteredNextProps = omit(nextProps, ['onClick']);
    const filteredCurrentProps = omit(this.prop, ['onClick']);
    return !shallowEqual(filteredNextProps, filteredCurrentProps);
  }
}

// Somewhere else:

<MyComponent onClick={handleOnClick} {...rest} />

Good thing about Lodash is that both these functions are available as individual modules, so use them at will. It also has a _.isEqual function that performs a deep-check of objects. This will solve the deep object problem somewhat, but won’t solve it when one of the values in the object is a function.

Update

The case of function is a bit complicated than the one provided in the example above. The naive way of passing a function is doing something like:

class MyComponent extends React.Component {
  handleClick = () => { this.setState({ clicked: true }); }

  render () {
    return (
      <a href='javascript:void(0)' onClick={() => this.setState({ clicked: true })>
        <ChildComponent func={this.doSomething} />
      </a>
    );
  }
}

class ChildComponent extends React.Component {
  shouldComponentUpdate (nextProps) {
    console.log(nextProps.func === this.props.func); // false, always
    return true;
  }

  render () {
    return <div>Child</div>;
  }
}

<MyComponent />

This type of code creates a binding for each render, so the func prop gets a new function every time the component renders. This is when the simpler form of shallowEqual fails. A different way to achieve the same effect, but without creating the new binding every time is by defining a property function for the class:

class MyComponent extends React.Component {
  doSomething = () => null // actually do something here
  handleClick = () => { this.setState({ clicked: true }); }

  render () {
    return (
      <a href='javascript:void(0)' onClick={this.handleClick}>
        <ChildComponent func={this.doSomething} />
      </a>
    );
  }
}

class ChildComponent extends React.Component {
  shouldComponentUpdate (nextProps) {
    console.log(nextProps.func === this.props.func); // true
    return true;
  }

  render () {
    return <div>Child</div>;
  }
}

<MyComponent />

This time, no new instance is getting created for each render. I thought I’d clear this up after reading an excellent post on React performance tips by Saif Hakim. ^back