Dylan Paulus

October 18, 2018 ReactJavascript

React: Controlling Rendering with Keys

key, the property we throw some value into to suppress warnings. This property is used by React to determine when a component is deleted, updated, or created. We generally don't interact much with the key prop--except in loops.

My team recently ran into an issue lately--how do we rerender all child components when a state has changed? The simplest approach... you guessed it, key!

Let's take a look.

class Parent extends Component {
  state = {
    key: true,
    count: 0
  };

  handleChildUnmount = () => {
    this.setState(prevProps => ({ count: prevProps.count + 1 }));
  };

  toggleKey = () => {
    this.setState(prevProps => ({ key: !prevProps.key }));
  };

  render() {
    const { key, count } = this.state;

    return (
      <div>
        <button onClick={this.toggleKey}>Toggle Child Key</button>
        <Child key={key} count={count} onUnmount={this.handleChildUnmount} />
      </div>
    );
  }
}

class Child extends Component {
  componentWillUnmount() {
    this.props.onUnmount();
  }

  render() {
    return <div>Total Renders: {this.props.count}</div>;
  }
}

Edit react-scroll-to

In this example we are toggling the key prop of our Child component between true and false. We then keep track every time the Child unmounts through a callback to increment the Parent's state. When we toggle the key prop, we will see the counter increment each time. This is, because React uses the key to determine if a component has changed. Since we are changing the key each time React will see our component has updates, and rerender the Child component.

This is the easiest way to cause a rerender of a child component (and all children of the child), and shows the power of understanding thekey prop!

Note: Even if a child component returns false in a shouldComponentUpdate, changing the key prop will cause it to rerender anyway (Try it in the CodeSandbox above!).