React Hooks Функциональные обновления

Question

Документация React (https://reactjs.org/docs/hooks-reference.html#usestate) имеет следующий пример:

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>
    </>
  );
}

Почему предыдущий код лучше чем:

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>
    </>
  );
}

Answer 1

Это не так. В вашем примере другой способ полностью подходит. Однако существуют другие случаи, а именно

(a), если у вас есть эффект, который устанавливает состояние:

  useEffect(() => {
     // ... do stuff
     setCount(count + 1);
  }, [count]); // whoops, thats kind of recursion. However if we omit it, count might change in the meantime

(b), если вы выполняете асинхронное действие, и локальную переменную состоянияможет не содержать текущего значения состояния:

 (async function action() {
     await /*something*/;
     setCount(count + 1); // is count still up to date?
  })();

В этих случаях использование обратного вызова setState является способом решения проблем.