What is the problem here with setTimeout and Closure?-CodePudding

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

CodePudding user response：

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 compoennt 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>