DEV Community

Cover image for React: Controlling Rendering Through Keys
Dylan Paulus
Dylan Paulus

Posted on

React: Controlling Rendering Through Keys

Note: This should be used sparingly as it can cause performance hits.

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>;
  }
}

Enter fullscreen mode Exit fullscreen mode

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!).

Practical Usage: reactjs.org - you-probably-dont-need-derived-state

Discussion (4)

Collapse
theoutlander profile image
Nick Karnik

Sorry, I'm not following. Can you give an example of a scenario where you need to force a rerender of children by unmounting them?

Can you use the context API instead or forceUpdate() which actually skips shouldComponentUpdate?

Ideally, every component should be rerendered only if there are changes to the DOM. In this case, since it is a contrived example, I can't wrap my head around a practical use-case. Thanks.

Collapse
ganderzz profile image
Dylan Paulus Author

Agreed, good point Nick. This should be used as a last resort or in special cases.

In my case, we needed to reload the entire page due to a change in where the API lives. Data can come from either a 'global' or 'local' source, and the user has the ability to switch between the two. Most of our API calls live in componentDidMount(), so there is no easy way of re-sending all the page's API calls without a rerender. Something like Redux could of helped, but would cause a huge rewrite.

Collapse
pr0da profile image
David Prokaj
Collapse
theoutlander profile image
Nick Karnik

I remember reading that, but never needed to use it so probably forgot about it. However, that use-case makes sense.

I generally usee getDerivedStateFromProps because it helps keep the components more efficient.