[Updates] Bailing out of a transactional setState call

For practical reasons about performance and energy conservation (in this sense, all React components are non-idempotent and have side effects), I occasionally will check my state before setting it:

if (this.state.something) {
  this.setState({ ... });
}

I would like to be able to do this with the transactional version of setState as well:

this.setState(state => {
  if (state.something) {
    return { ... };
  }
  // if null or undefined (or false?) is returned, don't re-render!
});

---

A toy example of this is a piece of component state that gets updated during each scroll event. Due to event batching (especially with RN), multiple scroll events can fly in during the same batch.

<ScrollView onScroll={() => {
  this.setState(state => {
    if (state.numberOfScrollEvents < 10) {
      return { numberOfScrollEvents: state.numberOfScrollEvents + 1 };
    }
  });
} />

[gaearon]

We allow returning null from updaters to prevent an update in 16.

[ide]

Re: the mutable values – the code doesn’t rely on deep updates. I meant something like this:

constructor() {
  this.state = { model: null, /* other fields */ };
}
onDataStoreUpdate(model) {
  // model could be a mutable object that the data store mutates when
  // the model's data changes. The store still calls `onDataStoreUpdate`
  // and we call `setState`, so there's no relying on `forceUpdate`
  this.setState({ model });
}
render() {
  // Is the re-rendering of Subcomponent what you consider a "deep update for
  // state consistency"?
  return <Subcomponent model={model} />;
}
shouldComponentUpdate(nextProps, nextState) {
  // Cannot reliably tell if nextState.model changed since it's mutable
}

you will always get a new props object if your parent rerendered.

This is pretty helpful to know I can rely on that. In my actual use case this helps a lot. I do still want to be able to use this.setState(this.state) to signal that there should be no update (what you’re doing here: https://github.com/reactjs/react-future/blob/master/09 - Reduce State/01 - Declarative Component Module.js#L41). It is pretty convenient.