[React] Call setState with null to Avoid Triggering an Update in React 16

Posted 2020-10-08 Answer1215

Sometimes it’s desired to decide within an updater function if an update to re-render should be triggered. Calling .setState with null no longer triggers an update in React 16. This means we can decided if the state gets updated within our .setState method itself!

In this lesson we‘ll explore how this works by refactoring a city map app that updates even if you choose the same map twice.

 

  selectCity = evt => {
    const newValue = evt.target.value;
    this.setState(state => {
      if (state.city === newValue) {
        return null;
      }
      return {
        city: newValue
      };
    });
  };