Как работает функция обновления в React?

Question

[Golden Boy]

Изучаю React и никак не могу понять как работает элементарная функция обновления, которая обычно прописывается в качестве аргумента в установщике состояния, а именно в чем принципиальная разница в подходах: setCount(count + 1) и setCount(prevCount => prevCount + 1) в следующем примере:

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(prevCount => prevCount + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

Я примерно понимаю, что использование функции обновления prevCount => prevCount + 1 как-то связано с замыканием, но каким образом и в каком месте непонятно.
Непонятно вообще как изменяется значение count при каждом клике на кнопку, начиная с первичного рендера.
Почитал документацию, пораспрашивал ЖПТ, но тем не менее то все не очень прояснило ситуацию, т.к. замыкание довольно мутный для меня вопрос еще с чистого JS.
Мог бы кто-нибудь пошагово объяснить что происходит с состоянием компонента от рендера к рендеру?

Comments

[WbICHA]

Я примерно понимаю, что использование функции обновления prevCount => prevCount + 1 как-то связано с замыканием

И с чем связано это понимание? Тут достаточно название прочитать: prev count = previous count. Надеюсь, переводить не надо?
Ты просто передаёшь каллбек, в который будет гарантированно передано текущее значение стейта. Всё. Ничего более.
Чтобы понять разницу, сделай два сетстейта в эвенте или оберни в юзкаллбек.

[Golden Boy]

WbICHA, а откуда тогда берется "prev count"? Почему к нему вообще имеется доступ после выполнения рендеринга?)

[WbICHA]

Golden Boy, почитай что такое калбеки.

Answer 1

[ParaBellum577]

1. С использованием функции обратного вызова (prevState):

const increment = () => {
  setCount(prevCount => prevCount + 1);
};

В этом случае setCount принимает функцию обратного вызова, которая получает предыдущее значение состояния (prevCount) и возвращает новое значение, основанное на предыдущем. Этот подход полезен, когда новое состояние зависит от предыдущего состояния. Это также гарантирует корректность обновления состояния, даже если функция increment вызывается многократно в быстром темпе.

2. С использованием текущего значения (count):

const increment = () => {
  setCount(count + 1);
};

В этом случае setCount обновляет состояние, используя текущее значение count. Этот подход прост и будет работать в большинстве случаев. Однако он может быть проблематичным, если increment вызывается многократно в быстром темпе, так как он не гарантирует корректность обновления состояния, особенно если обновление состояния асинхронно.

Использование функции обратного вызова (первый вариант) обычно рекомендуется, если новое состояние зависит от предыдущего, и если есть потенциально множественные обновления состояния. Это помогает избежать потери обновлений состояния и гарантировать корректность данных.

Comments

[Golden Boy]

Спасибо! Теперь понял)
На самом деле вводила в заблуждение формулировка "предыдущее состояние".
Все стало на места, как только наткнулся на другую, более понятную мне, а именно: Функция обновления берет отложенное состояние и вычисляет следующее состояние из него.

Answer 2

[Aetae]

Вот так утрировано выглядит внутри функция useState:

function useState(initialValue) {
  // подсчитываем вызовы useState в компоненте
  component.useStateCount++;

  // если уже был вызов этого useState(т.е. это не первая отрисовка)
  if (component.useStateCount in component.useStateCache) 
    // возвращаем результат из кэша
    return component.useStateCache[component.useStateCount];

  // если первый вызов - подготавливаем ответ вида [state, setState]
  const useStateResult = [
    initialValue, 
    function setState(callbackOrValue) {
      // если аргумент setState - функция
      if (typeof callbackOrValue === 'function') {
        // вызываем её с предыдущем значением в качестве аргумента и присваиваем результат вызова в state
        useStateResult[0] = callbackOrValue(useStateResult[0]);
      } else {
        // иначе просто присваиваем аргумент в state
        useStateResult[0] = callbackOrValue;
      }

      // вызов обновления компонента
      component.updateComounent(); 
    }
  ];

  // добавляем в кэш
  component.useStateCache[component.useStateCount] = useStateResult;

  // возвращаем
  return useStateResult;
}

Стало понятней?

Comments

[Golden Boy]

Спасибо большое!