What is the problem here with setTimeout and Closure?

Question

Firstly, I could not figure out the issue in this piece of code. But probably the issue has a place here.

As I could understand, the problem might be that the counter value is not updated after the button is clicked. The alert displays the value when the button was clicked, although during the delay of 2.5 seconds I clicked and increased the value of counter.

Am I right and if so, what should be fixed or added here?

import React, { useState } from 'react'

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

  function handleAlertClick() {
    setTimeout(() => {
       alert(`You clicked ${count} times`)
      }, 2500)
  }

  return (
    <Container>
      <Column>
        <h4>Closures</h4>
        <p>You clicked {count} times</p>
        <button type="button" onClick={() => setCount(counter => counter + 1)}>
          Click me
        </button>
        <button type="button" onClick={handleAlertClick}>
          Show alert
        </button>
      </Column>
    </Container>
  )
}

export default Root

*"As I could understand, the problem might be that the counter value is not updated after the button is clicked. "* Yes and no. `counter` is updated but `setTimeout` has already been invoked and thus refers to the "old" `counter` variable. Using refs is a simple way to solve this problem. — Felix Kling, Oct 21 '21 at 10:33
This might help to get a better understanding of closures: [JavaScript closure inside loops – simple practical example](https://stackoverflow.com/q/750486/218196). The situation with a React component is pretty similar to the one with the loop; every rerender is basically a new iteration. — Felix Kling, Oct 21 '21 at 10:35

Yousaf · Accepted Answer · 2021-10-25T05:25:19.157

Problem

When the setTimeout is called, its callback function closes over the current value of the count in the current render of the Root component.

Before the timer expires, if you update the count, that causes a re-render of the component BUT the callback function of setTimeout still sees the value that was in effect when the setTimeout was called. This is the gist of the problem caused by the closure in your code.

Each render of the Root component has its own state, props, local functions defined inside the component; in short, each render of a compoent is separate from the ones before it.

State is constant within a particular render of a component; component can't see the updated state until it re-renders. Any timer set in the previous render will see the value that it closed over; it cannot see the updated state.

Solution

You can use the useRef hook to get rid of the problem caused due to closure.

You can update the ref every time the Root component is re-rendered. This allows us to save the latest value of count in the ref.

Once you have a ref, instead of passing count to alert, pass the ref. This ensures that alert always shows the latest value of count.

function Root() {
  const [count, setCount] = React.useState(0)
  const countRef = React.useRef(count);

  // assign the latest value of "count" to "countRef"
  countRef.current = count;
  
  function handleAlertClick() {
    setTimeout(() => {
       alert(`You clicked ${countRef.current} times`)
      }, 2500)
  }

  return (
      <div>
        <h4>Closures</h4>
        <p>You clicked {count} times</p>
        <button type="button" onClick={() => setCount(counter => counter + 1)}>
          Click me
        </button>
        <button type="button" onClick={handleAlertClick}>
          Show alert
        </button>
      </div>
  )
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>

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

You don't even need to use `useEffect` here, you can just do `countRef.current = count;` directly. — Felix Kling, Oct 21 '21 at 10:30
Might worth noting that every render creates a new `handleAlertClick` function that captures the then current value of `counter`. `handleAlertClick` functions from older render passes are completely independent of `handleAlertClick` functions from new render passes. — Felix Kling, Oct 21 '21 at 10:37

What is the problem here with setTimeout and Closure?

1 Answers1