CODEWITHSUNDEEP
javascriptreactjspromisesettimeoutevent-loop
Батрадз Санакоев
Батрадз Санакоев

Reputation: 67

How to write react code with settimeout correctly?

I have the next code:

const Button = () => {
  const [numbers, setNumbers] = useState({
    a: 10,
    b: 30,
    c: 100,
    d: new Date()
  });

  const click = () => {
    setTimeout(click2, 2000);
  };

  const click2 = () => {
    setNumbers({
      a: numbers.a + 1,
      b: numbers.b + 1,
      c: numbers.c + 1,
      d: new Date()
    });
  };

  return (
    <>
      <button onClick={click}>+</button>
      <p>{numbers.a}</p>
      <p>{numbers.b}</p>
      <p>{numbers.c}</p>
      <p>{numbers.d.toLocaleString()}</p>
    </>
  );
};

When I press the button once, the code works correctly. But if I press the button twice in a row, the code will only run once. Please explain why this is happening and how to make the code run every time you click it?

Upvotes: 0

Views: 37

Answers (1)

Sumanth Madishetty
Sumanth Madishetty

Reputation: 3605

It's because click2 function will have the old state value itself when clicked the second time as the setState of the first click is not run yet, Instead of referencing statevalue directly use prevState method of setting state, according to that change your click2 function as below

    setNumbers((num) => {
      return {
        a: num.a + 1,
        b: num.b + 1,
        c: num.c + 1,
        d: new Date()
      };
    });
  };

Please refer this codesandbox for reference

Upvotes: 1

Related Questions