Edit - Stack Overflow

You are not logged in. Your edit will be placed in a queue until it is peer reviewed.

We welcome edits that make the post easier to understand and more valuable for readers. Because community members review edits, please try to make the post substantially better than how you found it, for example, by fixing grammar or adding additional resources and hyperlinks.

Required fields*

Rev

Required fields*

Does React keep the order for state updates?

I know that React may perform state updates asynchronously and in batch for performance optimization. Therefore you can never trust the state to be updated after having called setState. But can you trust React to update the state in the same order as setState is called for

the same component?
different components?

Consider clicking the button in the following examples:

1. Is there ever a possibility that a is false and b is true for:

class Container extends React.Component {
  constructor(props) {
    super(props);
    this.state = { a: false, b: false };
  }

  render() {
    return <Button onClick={this.handleClick}/>
  }

  handleClick = () => {
    this.setState({ a: true });
    this.setState({ b: true });
  }
}

2. Is there ever a possibility that a is false and b is true for:

class SuperContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { a: false };
  }

  render() {
    return <Container setParentState={this.setState.bind(this)}/>
  }
}

class Container extends React.Component {
  constructor(props) {
    super(props);
    this.state = { b: false };
  }

  render() {
    return <Button onClick={this.handleClick}/>
  }

  handleClick = () => {
    this.props.setParentState({ a: true });
    this.setState({ b: true });
  }
}

Keep in mind that these are extreme simplifications of my use case. I realize that I can do this differently, e.g. updating both state params at the same time in example 1, as well as performing the second state update in a callback to the first state update in example 2. However, this is not my question, and I am only interested in if there is a well defined way that React performs these state updates, nothing else.

Any answer backed up by documentation is greatly appreciated.

Answer*

I work on React.

**TLDR:**

>But can you trust React to update the state in the same order as setState is called for
>
>* the same component?

Yes.

>* different components?

Yes.

The **order** of updates is always respected. Whether you see an intermediate state "between" them or not depends on whether you're inside in a batch or not.

In React 17 and earlier, **only updates inside React event handlers are batched by default**. There is an unstable API to force batching outside of event handlers for rare cases when you need it.

**Starting from React 18, React [batches all updates by default](https://reactjs.org/blog/2022/03/29/react-v18.html#new-feature-automatic-batching).** Note that React will never batch updates from two different intentional events (like clicks or typing) so, for example, two different button clicks will never get batched. In the rare cases that batching is not desirable, you can use [`flushSync`](https://reactjs.org/docs/react-dom.html#flushsync).

----

The key to understanding this is that **no matter how many `setState()` calls in how many components you do _inside a React event handler_, they will produce only a single re-render at the end of the event**. This is crucial for good performance in large applications because if `Child` and `Parent` each call `setState()` when handling a click event, you don't want to re-render the `Child` twice.

In both of your examples, `setState()` calls happen inside a React event handler. Therefore they are always flushed together at the end of the event (and you don't see the intermediate state).

The updates are always **shallowly merged in the order they occur**. So if the first update is `{a: 10}`, the second is `{b: 20}`, and the third is `{a: 30}`, the rendered state will be `{a: 30, b: 20}`. The more recent update to the same state key (e.g. like `a` in my example) always "wins".

The `this.state` object is updated when we re-render the UI at the end of the batch. So if you need to update state based on a previous state (such as incrementing a counter), you should use the functional `setState(fn)` version that gives you the previous state, instead of reading from `this.state`. If you're curious about the reasoning for this, I explained it in depth [in this comment](https://github.com/facebook/react/issues/11527#issuecomment-360199710).

----

In your example, we wouldn't see the "intermediate state" because we are **inside a React event handler** where batching is enabled (because React "knows" when we're exiting that event).

However, both in React 17 and earlier versions, **there was no batching by default outside of React event handlers**. So if in your example we had an AJAX response handler instead of `handleClick`, each `setState()` would be processed immediately as it happens. In this case, yes, you **would** see an intermediate state in React 17 and earlier:

    promise.then(() => {
      // We're not in an event handler, so these are flushed separately.
      this.setState({a: true}); // Re-renders with {a: true, b: false }
      this.setState({b: true}); // Re-renders with {a: true, b: true }
      this.props.setParentState(); // Re-renders the parent
    });

We realize it's inconvenient that **the behavior is different depending on whether you're in an event handler or not**. In React 18, this is no longer necessary, but before that, **there was an API you can use to force batching**:


    promise.then(() => {
      // Forces batching
      ReactDOM.unstable_batchedUpdates(() => {
        this.setState({a: true}); // Doesn't re-render yet
        this.setState({b: true}); // Doesn't re-render yet
        this.props.setParentState(); // Doesn't re-render yet
      });
      // When we exit unstable_batchedUpdates, re-renders once
    });


Internally React event handlers are all being wrapped in `unstable_batchedUpdates` which is why they're batched by default. Note that wrapping an update in `unstable_batchedUpdates` twice has no effect. The updates are flushed when we exit the outermost `unstable_batchedUpdates` call. 

That API is "unstable" in the sense that we will eventually remove it in some major version after 18 (either 19 or further). You safely rely on it until React 18 if you need to force batching in some cases outside of React event handlers. With React 18, you can remove it because it doesn't have any effect anymore.

----

To sum up, this is a confusing topic because React used to only batch inside event handlers by default. But the solution is not to *batch less*, it's to *batch more* by default. That's what we're doing in React 18.

Edit Summary*

Cancel

3

One way to "always get the order right" is to create a temporary object, assign the different values (e.g obj.a = true; obj.b = true) and then at the end just do this.setState(obj). This is safe regardless if you are inside an event handler or not. Might be a neat trick if you often find yourself making the mistake of setting the state several times outside of event handlers.

Chris
– Chris

2018-02-12 13:43:32 +00:00
Commented Feb 12, 2018 at 13:43
1

And by the way that also means we should not read from this.state at all; the only reasonable way to read some state.X is to read it in updater function, from its argument. And, writing to this.state is also unsafe. Then why allow access to this.state at all? Those should maybe made standalone questions but mostly I am just trying to understand if I got the explanation right.

Maksim Gumerov
– Maksim Gumerov

2018-02-22 11:39:38 +00:00
Commented Feb 22, 2018 at 11:39
26

this answer should be added to reactjs.org documentation

Deen John
– Deen John

2018-03-10 02:53:54 +00:00
Commented Mar 10, 2018 at 2:53
4

Could you please clarify in this post if "React event handler" includes componentDidUpdate and other lifecycle callbacks as of React 16? Thanks in advance!

Ivan
– Ivan

2020-02-14 11:48:46 +00:00
Commented Feb 14, 2020 at 11:48
1

Updated the answer for React 18: localhost:8000/blog/2022/03/29/…

Dan Abramov
– Dan Abramov

2022-04-06 23:57:42 +00:00
Commented Apr 6, 2022 at 23:57

| Show 14 more comments

Correct minor typos or mistakes
Clarify meaning without changing it
Add related resources or links
Always respect the author’s intent
Don’t use edits to reply to the author

create code fences with backticks ` or tildes ~
```
like so
```
add language identifier to highlight code
```python
def function(foo):
print(foo)
```
put returns between paragraphs
for linebreak add 2 spaces at end
_italic_ or **bold**
indent code by 4 spaces
backtick escapes `like _so_`
quote by placing > at start of line
to make links (use https whenever possible)

<https://example.com>

[example](https://example.com)

<a href="https://example.com">example</a>

formatting help »
answering help »

Collectives™ on Stack Overflow

Does React keep the order for state updates?

Answer*