How To Solve The React Hook Closure Issue?

by

The reason the alert shows the outdated value of count is because the callback passed to setTimeout is referencing an outdated value of count captured by the closure. This is usually referred to as a stale-closure.

On the initial render, the anonymous function passed as a callback to setTimeout captures the value of count as 0, and when the button show alert gets clicked the callback gets queued but with the outdated value of count.

In the case above the easiest solution to show the updated value of count in the alert message and fix the stale-closure issue will be to use a ref.

function App() {
  const [count, setCount] = useState(0);

  const latestValue = useRef(count);

  const handleAlertClick = () => {
    setTimeout(() => {
      alert(`count is: ${latestValue.current}`);
    }, 3000);
  };

  return (
    <div>
      <p>You clicked {count} times</p>
      <button
        onClick={() => {
          setCount(prev => {
            latestValue.current = prev + 1;
            return prev + 1;
          });
        }}
      >
        Click me
      </button>
      <button onClick={handleAlertClick}>Show alert</button>
    </div>
  );
}

Working demo in codesandbox

Hooks rely heavily on closures to work, so it very likely that you may bump into problems regarding stale-closures. Here is a nice article on how stale-closures create issues when using react-hooks and demonstrates how to fix some the issue in some situations.

More Related Contents:

  1. How to update state with usestate in an array of objects?
  2. Unable to access React instance (this) inside event handler [duplicate]
  3. React: “this” is undefined inside a component function
  4. Why do we need middleware for async flow in Redux?
  5. Push method in React Hooks (useState)?
  6. “this” is undefined inside map function Reactjs
  7. How do I conditionally add attributes to React components?
  8. React component initialize state from props
  9. How do I test axios in Jest?
  10. Why can’t I update props in react.js?
  11. Intercept/handle browser’s back button in React-router?
  12. react router doesn’t work in aws s3 bucket
  13. React Routing works in local machine but not Heroku
  14. Rendering React components with promises inside the render method
  15. When to use JSX.Element vs ReactNode vs ReactElement?
  16. React useState hook event handler using initial state
  17. Get path params in react-router v4
  18. In reactJS, how to copy text to clipboard?
  19. Unexpected token < error in react router component
  20. Why IE 11 display blank page rendering react app
  21. Unable to use Arrow functions inside React component class [duplicate]
  22. Passing values to onclick [duplicate]
  23. How can I call parent method in a child React component?
  24. Where’s the connection between index.html and index.js in a Create-React-App application?
  25. useEffect is running twice on mount in React
  26. React – useState – why setTimeout function does not have latest state value?
  27. Matched leaf route at location “/” does not have an element
  28. Simulate a button click in Jest
  29. “You may need an additional loader to handle the result of these loaders.”
  30. closure inside a for loop – callback with loop variable as parameter [duplicate]

Leave a Comment