React - useState - why setTimeout function does not have latest state value?

Question

Recently I was working on React Hooks and got stuck with one problem/doubt?

Below is a basic implementation to reproduce the issue, Here I'm just toggling flag (a state) variable on click of the button.

  const [flag, toggleFlag] = useState(false);
  const data = useRef(null);
  data.current = flag;

  const _onClick = () => {
    toggleFlag(!flag);
    // toggleFlag(!data.current); // working

    setTimeout(() => {
      toggleFlag(!flag); // does not have latest value, why ?
      // toggleFlag(!data.current); // working
    }, 2000);
  };

  return (
    <div className="App">
      <button onClick={_onClick}>{flag ? "true" : "false"}</button>
    </div>
  );

I figured out some other way to overcome this problem like using useRef or useReducer, but is this correct or is there any other way to solve this with useState only?

Also, it would be really helpful if anyone explains why we get old value of state inside the setTimeout.

Sandbox URL - https://codesandbox.io/s/xp540ynomo

score 36 · Accepted Answer · answered Mar 16 '19 at 15:42

36

This boils down to how closures work in JavaScript. The function given to setTimeout will get the flag variable from the initial render, since flag is not mutated.

You could instead give a function as argument to toggleFlag. This function will get the correct flag value as argument, and what is returned from this function is what will replace the state.

Example

const { useState } = React;

function App() {
  const [flag, toggleFlag] = useState(false);

  const _onClick = () => {
    toggleFlag(!flag);

    setTimeout(() => {
      toggleFlag(flag => !flag)
    }, 2000);
  };

  return (
    <div className="App">
      <button onClick={_onClick}>{flag ? "true" : "false"}</button>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

answered Mar 16 '19 at 15:42

Tholle

108,070
19
198
189

Doesn't `_onClick` get a new closure and a new `flag` value on every render? – UjinT34 Mar 16 '19 at 15:45
1

@UjinT34 Yes, but when `_onClick` is first invoked the timeout is created, and then when the timeout function is invoked some time later, `flag` will be looked up in the context of the initial render, so it will get the "old" value. – Tholle Mar 16 '19 at 15:47
When does the closure fot `setTimeout` get created? I thought that it is created every time `_onClick` is called and gets the `flag` captured by `_onClick` and not the original `flag` variable. – UjinT34 Mar 16 '19 at 16:04
@UjinT34 I think it will make sense if you think of `App` as a function, and every re-render will cause a new call to the `App` function. The first call to `App` does not "see" the variables in the second call to `App`. – Tholle Mar 16 '19 at 16:06
1

May be I got the "initial render" wrong. For me it sounds like `setTimeout` has `flag = false` forever as it was on the first `App` call. Please, check my answer. – UjinT34 Mar 16 '19 at 16:32
@UjinT34 Yes, you are right in that the function given to `setTimeout` in the initial render will always see `flag = false`. – Tholle Mar 16 '19 at 16:36

score 3 · Answer 2 · answered Mar 16 '19 at 16:32

The function given to setTimeout will get the flag variable from the _onClick function. The _onClick function gets created every render and "stores" the value which the flag variable gets on this render.

function App() {
  const [flag, toggleFlag] = useState(false);
  console.log("App thinks that flag is", flag);

  const _onClick = () => {
    console.log("_onClick thinks that flag is", flag);
    toggleFlag(!flag);

    setTimeout(() => {
      console.log("setTimeout thinks that flag is", flag);
    }, 100);
  };

  return (
    <div className="App">
      <button onClick={_onClick}>{flag ? "true" : "false"}</button>
    </div>
  );
}

Console:

App thinks that flag is false

_onClick thinks that flag is false
App thinks that flag is true
setTimeout thinks that flag is false

_onClick thinks that flag is true
App thinks that flag is false
setTimeout thinks that flag is true

score 0 · Answer 3 · answered Apr 20 '23 at 12:16

0

You can also use this package created to address this specific "old state values in inner functions" problem: https://github.com/Aminadav/react-useStateRef

answered Apr 20 '23 at 12:16

John Rizzo

771
2
10
19

React - useState - why setTimeout function does not have latest state value?

3 Answers3

Linked

Related