Separately called React setState() giving unexpected result

Question

I'm new with React and confused with the result below code is giving.
num gets value -1, where I think it should be 100.

useEffect[num] is expected to run first, calling setNum(100) since num is initialized to -1.
Then useEffect[dummy] will run, calling setNum(-1).

I learned that multiple calls to the same setState function are batched together, and only the result from the last call is rendered.

So it seems like setNum(100) will be overwritten by subsequent setNum(-1).

The problem is, if setNum(-1) was processed in the end, it should have called setNum(100) in useEffect[num].
num should be 100, but it's stuck at -1.

Why did my program stop before calling setNum(100) in the end?
Please teach me what I'm missing : async nature of setState or batched updates?

import "./styles.css";
import React, { useState, useEffect } from "react";

export default function App() {
  const [num, setNum] = useState(-1);
  const [dummy, setDummy] = useState(false);
  
  useEffect(() => {
    console.log("setNum : ", num);
    if (num === -1) setNum(100);
  }, [num]);

  // Just to call setNum(-1) separately
  useEffect(() => {
    console.log("Init dummy : ", dummy);
    setNum(-1);
  }, [dummy]);

  return (
    <div className="App">
      <div> {num} </div>
    </div>
  );
}

Here is codesandbox to run the code.
https://codesandbox.io/s/strange-chatelet-3oxy8?file=/src/App.js

Yousaf · Accepted Answer · 2021-08-15 12:39:07Z

2

The problem is, if setNum(-1) was processed in the end, it should have called setNum(100) in useEffect[num].

Here's how your code executes:

Initial render of the component
First useEffect is called; it logs the value of num and then calls setNum(100)
Second useEffect is called which logs the value of dummy and then calls setNum(-1)
There are two pending num state updates; both of them are batched and the last one wins, i.e. setNum(-1).
Component re-renders and the value of num is -1 BUT that won't trigger the first useEffect, even though it depends on num, because the value of num didn't change; it's still -1

If you change the initial value of num to any value other than -1, you will see the first useEffect executing again like you expect.

answered Aug 15, 2021 at 12:39

Yousaf

29.5k6 gold badges54 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nisharg Shah Over a year ago

I am thinking that you explain my answer in detail and got the vote, xDD

Jonas Hendel · Accepted Answer · 2021-08-15 12:30:53Z

1

If you switch the useEffects like this:

      // Just to call setNum(-1) separately
      useEffect(() => {
        console.log("Init dummy : ", dummy);
        setNum(-1);
      }, [dummy]);

      useEffect(() => {
        console.log("setNum : ", num);
        if (num === -1) setNum(100);
      }, [num]);

The final num should be 100.

answered Aug 15, 2021 at 12:30

Jonas Hendel

5864 silver badges17 bronze badges

1 Comment

goldenriver4422 Over a year ago

So in this case, useEffect[dummy] calls setNum(-1) → useEffect[num] calls setNum(100) And last call 'setNum(100)' wins from batching

Nisharg Shah · Accepted Answer · 2021-08-15 12:31:02Z

1

In the useEffect order matters and the initial value also.

If the initial value and settled value are the same then no rerender will execute and your dependency useEffect also not called and your final value will be your initial value.

export default function App() {
  const [num, setNum] = useState(-1);
  const [dummy, setDummy] = useState(false);

  useEffect(() => {
    console.log("setNum : ", num);
    if (num === -2) setNum(100);
  }, [num]);

  useEffect(() => {
    console.log("Init dummy : ", dummy);
    setNum(-2);
  }, [dummy]);

  return (
    <div className="App">
      <div> {num} </div>
    </div>
  );
}

For example, if you will add -2 in the if and your dummy useEffect then you will see your desire result 100.

Codesandbox: https://codesandbox.io/s/objective-blackwell-odl5v?file=/src/App.js

answered Aug 15, 2021 at 12:31

Nisharg Shah

20k12 gold badges70 silver badges78 bronze badges

2 Comments

goldenriver4422 Over a year ago

So if setState does not change the state, useEffect will not be called (neither rendering happens). Seems pretty obvious after reading this. Thank you for your answer!

Nisharg Shah Over a year ago

Yes you are right, only the state can perform rerender, I am happy that you solved your confussion

Collectives™ on Stack Overflow

Separately called React setState() giving unexpected result

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related