Why is using previous state to update state preferred over using current state in React?

Question

I am trying to understand why using the previous state to update the state of an element in React is preferred over using the current state. I have seen this practice being used in various code examples and tutorials, but I couldn't find a satisfying example that clearly explains the reasoning behind it.

I understand that updating the state using the previous state ensures that the correct state is used for the update and avoids race conditions, but I am still not clear on the details.

Can someone please provide a clear and concise explanation, along with a simple code example that demonstrates the difference between updating the state using the current state vs the previous state? I would appreciate any resources or references that can help me understand this better. Thank you.

I think I know what you are asking, but I need a code example either way to help you. — Wayne, Mar 24 '23 at 22:47

score 0 · Answer 1 · answered Mar 24 '23 at 16:28

This is broken (shows 0 and then 1 forever):

import { useEffect, useState } from "react";

export default function App() {
  const [value, setValue] = useState(0);

  useEffect(() => {
    const int = setInterval(() => {
      // value is always 0 here because of stale closure
      setValue(value + 1);
    }, 1000);
    return () => clearInterval(int);
  }, []);

  return <div>{value}</div>;
}

This works fine (adds 1 to the state each second):

import { useEffect, useState } from "react";

export default function App() {
  const [value, setValue] = useState(0);

  useEffect(() => {
    const int = setInterval(() => {
      // value is different every time
      setValue((value) => value + 1);
    }, 1000);
    return () => clearInterval(int);
  }, []);

  return <div>{value}</div>;
}

Thankyou Konrad for letting me know about stale closure – Kalyan cs Mar 25 '23 at 08:33 — Kalyan cs, Mar 25 '23 at 08:33

Why is using previous state to update state preferred over using current state in React?

1 Answers1