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

by

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>

More Related Contents:

  1. The useState set method is not reflecting a change immediately
  2. State not updating when using React state hook within setInterval
  3. Make React useEffect hook not run on initial render
  4. Push method in React Hooks (useState)?
  5. How can I use React hooks in React classic `class` component?
  6. How to call loading function with React useEffect only once
  7. How to use componentWillMount() in React Hooks?
  8. Is it possible to share states between components using the useState() hook in React?
  9. Why is useState not triggering re-render?
  10. Updating and merging state object using React useState() hook
  11. componentDidMount equivalent on a React function/Hooks component?
  12. react useEffect comparing objects
  13. How to register event with useEffect hooks?
  14. React useState hook event handler using initial state
  15. Is there a generic way to set state in React Hooks? How to manage multiple states?
  16. How do I update states `onChange` in an array of object in React Hooks
  17. React Function Components with hooks vs Class Components
  18. React Hooks – What’s happening under the hood?
  19. useEffect does not listen for localStorage
  20. setTimeout for this.state vs useState
  21. How does JavaScript mechanism behind react hooks work?
  22. Why need useRef and not mutable variable?
  23. Determine which dependency array variable caused useEffect hook to fire
  24. What does useCallback/useMemo do in React?
  25. Updating state to the same state directly in the component body
  26. Do we still need functional setState way in react hooks?
  27. Proper way of using React hooks + WebSockets
  28. React hook useEffect runs continuously forever/infinite loop
  29. TypeError dispatcher.useState is not a function when using React Hooks
  30. useState hook, setState function. Accessing previous state value

Leave a Comment