State not updating when using React state hook within setInterval

by

The reason is because the callback passed into setInterval‘s closure only accesses the time variable in the first render, it doesn’t have access to the new time value in the subsequent render because the useEffect() is not invoked the second time.

time always has the value of 0 within the setInterval callback.

Like the setState you are familiar with, state hooks have two forms: one where it takes in the updated state, and the callback form which the current state is passed in. You should use the second form and read the latest state value within the setState callback to ensure that you have the latest state value before incrementing it.

Bonus: Alternative Approaches

Dan Abramov, goes in-depth into the topic about using setInterval with hooks in his blog post and provides alternative ways around this issue. Highly recommend reading it!

function Clock() {
  const [time, setTime] = React.useState(0);
  React.useEffect(() => {
    const timer = window.setInterval(() => {
      setTime(prevTime => prevTime + 1); // <-- Change this line!
    }, 1000);
    return () => {
      window.clearInterval(timer);
    };
  }, []);

  return (
    <div>Seconds: {time}</div>
  );
}

ReactDOM.render(<Clock />, document.querySelector('#app'));
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id="app"></div>

More Related Contents:

  1. How can I use multiple refs for an array of elements with hooks?
  2. React useEffect in depth / use of useEffect?
  3. Is useState synchronous? [duplicate]
  4. Wrong React hooks behaviour with event listener
  5. React hooks – right way to clear timeouts and intervals
  6. React Hooks useState() with Object
  7. Multiple calls to state updater from useState in component causes multiple re-renders
  8. What’s the difference between `useRef` and `createRef`?
  9. How can I force a component to re-render with hooks in React?
  10. Executing async code on update of state with react-hooks
  11. Why React Hook useState uses const and not let
  12. React useEffect causing: Can’t perform a React state update on an unmounted component
  13. How to change the value of a Context with useContext?
  14. How to prevent re-rendering of components that have not changed?
  15. How target DOM with react useRef in map
  16. How to programmatically clear/reset React-Select?
  17. React Hooks Error: Hooks can only be called inside the body of a function component
  18. React – useState – why setTimeout function does not have latest state value?
  19. What does useCallback/useMemo do in React?
  20. React Hooks useState+useEffect+event gives stale state
  21. How to add “refs” dynamically with react hooks?
  22. Do we still need functional setState way in react hooks?
  23. Why can’t React Hooks be called inside loops or nested function?
  24. How to set initial state for useState Hook in jest and enzyme?
  25. Uncaught Invariant Violation: Rendered more hooks than during the previous render
  26. React Hook “useEffect” is called conditionally
  27. Equivalent to componentDidUpdate using React hooks
  28. Performance penalty of creating handlers on every render with react-hooks
  29. Function inside functional component in React hooks – Performance
  30. Why would we use useEffect without a dependency array?

Leave a Comment