React ловит, как выполнить функцию побочного эффекта только один раз, если мне нужно обновить 2 переменные зависимости

Question

Допустим, у меня есть следующий компонент, использующий перехватчики реакции

const Component = (props) => {
   [state1, setState1] = useState();
   [state2, setState2] = useState();
   useEffect(()=>{
       // use state1 and state2 as param to fetch data
       ...
   }, [state1, state2])

   onSomethingChange = () => {
       setState1(...);
       setState2(...);
   }

   return (..);
}

Когда срабатывает onSomethingChange, я подумал, что он вызовет функцию побочного эффекта дважды, так как я обновляю 2 разных переменных состояния в одном и том же массиве зависимостей. , И я собирался реорганизовать эти 2 переменные в 1 объект, но я решил сначала протестировать их как две отдельные переменные.

Я заметил, что функция побочных эффектов выполняется только один раз, даже когда я обновляю 2 разных состояния. переменные в том же массиве зависимостей, это то, что я хотел, но я не знаю почему. Может кто-нибудь объяснить, как это работает под бо nnet?

Answer 1

Это потому, что иногда React может объединять несколько изменений состояния в одно обновление для повышения производительности. React будет пакетно обновлять состояние, если они запускаются из события на основе React, поэтому ваш блок побочных эффектов вызывается только один раз. Для получения дополнительной информации, вы можете обратиться к этой теме: https://github.com/facebook/react/issues/14259

Answer 2

Реакция обновлений состояния пакетов изнутри.

Это просто означает, что вызов

setState1(...);
setState2(...);

в одном и том же синхронном (!) Цикле выполнения (например, в той же функции) НЕ будет запускаться два цикла повторного рендеринга компонента.

Вместо этого компонент будет повторно рендериться только один раз, и оба обновления состояния будут применены одновременно.

Не имеет прямого отношения, но иногда неправильно понимается, когда доступно новое значение состояния.

Рассмотрим этот код:

console.log(name); // prints name state, e.g. 'Doe'
setName('John');

console.log (name); // ??? что печатается? 'Джон'?

Можно подумать, что доступ к состоянию имени после setName ('Джон'); должен выдавать новое значение (например, «Джон»), но это НЕ тот случай.

Новое значение состояния доступно только в следующем цикле рендеринга компонента (который планируется по вызову setName ()).