0

I have a component similar to the below with a number of functional setState calls to change an array of objects. I'm using functional setState to make things easier for testing.

In this scenario, with completeDef, I'm calling completeCurrentDef that will empty the defs array, which is used in rendering. Then I call useNextDefsIfEmpty to replace defs with nextDefs.

Right now, this works, but I'm concerned about it rendering in between the two setState calls, which if it does, currentDef will be undefined and break my application. Yes, I could add a default or something to ensure this doesn't happen, but I only want to do that if necessary.

How does React's lifecycle work in this case?

Will React render in between the two functional setState calls or will it process all setState calls and then render? Or does something else happen?

class DefinitionList extends React.Component {
  state = {
    defs: [{word: 'some', meaning: 'a few'}], 
    nextDefs: [{word: 'all', meaning: 'everything'}],
    completedDefs: [],
  };

  completeDef = () => {
    this.setState(completeCurrentDef);
    // can render happen here?
    this.setState(useNextDefsIfEmpty);
  }

  render() {
    const {defs} = this.state;
    const currentDef = defs[0];
    const {word, meaning} = currentDef;

    return (
      <div onClick={this.completeDef}>
        <p>{word}</p>
        <p>{meaning}</p>
        <p>Learn</p>
      </div>
    );
  }
}

const useNextDefsIfEmpty = state => ({
  defs: state.defs.length ? state.defs : state.nextDefs
});

const completeCurrentDef = state => ({
  defs: state.defs.slice(1),
  completedDefs: state.completedDefs.concat(state.defs[0]),
});

Note: This is not the same as a regular setState call with an object. This is passing a function into setState. For more on functional setState, see this article

Merlin -they-them-
  • 2,731
  • 3
  • 22
  • 39
  • "Will React render in between the two functional setState calls?" Yes, it will. React does not batch the setState calls. – jmargolisvt Aug 12 '18 at 20:24
  • 2
    See this similar question: https://stackoverflow.com/questions/33613728/what-happens-when-using-this-setstate-multiple-times-in-react-component Also see this answer: https://github.com/facebook/react/issues/10231#issuecomment-316644950 @jmargolisvt for event handlers I think it still batches(see the github link). Though I wouldn't trust that and set up my logic in a different way. – devserkan Aug 12 '18 at 20:28
  • 1
    Oooh! Didn't realize there was a difference with event handlers! Thanks for sharing @devserkan. – jmargolisvt Aug 12 '18 at 20:32
  • another detailed explanation: https://stackoverflow.com/questions/48563650/does-react-keep-the-order-for-state-updates/48610973#48610973 – skyboyer Aug 12 '18 at 20:39
  • @devserkan that is for setState using objects. This is functional setState, where you pass in functions instead. I've attached an article above about what that is – Merlin -they-them- Aug 13 '18 at 14:18
  • @merlinpatt, I know the difference but your question is not **directly** related with this concept. If you use a callback for `setState` you guarantee that you avoid the asynchronous hiccups of `setState`. This is OK. But you are calling `setState` twice. So, does React batch them or does not? What happens between them? This is what do you ask, am I right? As far as I know React batches those state changes except for asynchronous network requests. In the future (v17) all of them will be batched. Just read Dan Abramov's answer on the Github link I gave. – devserkan Aug 13 '18 at 14:30
  • From the article I link to above, it says that object calls are batched, function calls are queued. And all the references and other questions talk about object calls. None of them specify how the lifecycle works with functional calls. – Merlin -they-them- Aug 13 '18 at 22:32

1 Answers1

0

Some time ago, I watched advance react patterns workshop @paypal by kentcdodds.

React setState isn’t synchronous, it’s batched. You should pass callback as second argument to see updated state.

Here is the link of that talk. Watch it from 41-44 mins. You would get a better idea of setState batch process. https://youtu.be/SuzutbwjUp8

Sakhi Mansoor
  • 7,832
  • 5
  • 22
  • 37