Why is useState and functional update forms in React necessary?

Question

I was reading the documentation about React Hook function updates and saw this sentence:

The " " and "-" buttons use functional form because the updated value is based on the previous value

But I can't see what the purpose of function updates is, and the difference between them and using the old state directly when calculating the new state.

Why does the update function of React useState Hook require a function update form? What are some examples where the difference is clearly visible (and therefore using direct update would result in an error)?

For example, if I change the example in the documentation to:

function Counter({initialCount}) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>Reset</button>
      <button onClick={() => setCount(prevCount => prevCount 1)}> </button>
      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
    </>
  );
}

Update count directly:

function Counter({initialCount}) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>Reset</button>
      <button onClick={() => setCount(count 1)}> </button>
      <button onClick={() => setCount(count - 1)}>-</button>
    </>
  );
}

I don't see any difference in behavior, and can't imagine a situation where count won't be updated (or isn't up to date). Because every time the count changes, a new closure will be called to capture the latest count.

Answer 1

I encountered this need recently. For example, let's say you have a component that populates an array and is able to load a dynamic source of 10 items each time based on some action by the user (like in my case when the user keeps scrolling down the screen .The code looks a bit like this:

function Stream() {
  const [feedItems, setFeedItems] = useState([]);
  const { fetching, error, data, run } = useQuery(SOME_QUERY, vars);

  useEffect(() => {
    if (data) {
      setFeedItems([...feedItems, ...data.items]);
    }
  }, [data]);     // <---- 这违反了hooks的规则，缺少了feedItems

...
<button onClick={()=>run()}>获取更多</button>
...

Obviously, you can't simply add feedItems to the dependency list of the useEffect hook, because you call setFeedItems in it, so you'll get stuck in a loop.

Functional updates to the rescue:

useEffect(() => {
    if (data) {
      setFeedItems(prevItems => [...prevItems, ...data.items]);
    }
  }, [data]);     //  <--- 现在一切都好了

Answer 2

In React, status updates are asynchronous. Therefore, on the next update, there may be old values ​​in count. For example, compare the results of the following two code examples:

function Counter({initialCount}) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>重置</button>
      <button onClick={() => {
        setCount(prevCount => prevCount + 1); 
        setCount(prevCount => prevCount + 1)}
      }>+</button>
    </>
  );
}

and

function Counter({initialCount}) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>重置</button>
      <button onClick={() => {
        setCount(count + 1); 
        setCount(count + 1)}
      }>+</button>
    </>
  );
}