Об этом ответе Дана Абрамова здесь, в SO, я обнаружил следующее:
Сохраняет ли React порядок обновлений состояния?
В настоящее время (React 16 и более ранние версии), по умолчанию объединяются только обновления внутри обработчиков событий React. Существует нестабильный API для принудительной пакетной обработки вне обработчиков событий в редких случаях, когда это необходимо.
Он также упоминает, что в этом выпуске Github:
https://github.com/facebook/react/issues/10231#issuecomment-316644950
В текущем выпуске они будут объединены вместе, если вы находитесь внутри Reactобработчик событий. React упаковывает все setStates, выполненные во время обработчика событий React, и применяет их непосредственно перед выходом из собственного обработчика событий браузера.
Но факт в том, что этот фрагмент кажетсяДокажите , что обновления для нескольких setState вызовов внутри useEffect() являются пакетными.
ВОПРОС
React также всегда пакетныйобновления для нескольких setState() звонков внутри useEffect?Где еще он это делает?
ПРИМЕЧАНИЕ: Согласно его ответам, в следующем основном выпуске (вероятно, v17) React будет пакетироваться везде по умолчанию.
SNIPPET: пакетные обновления внутри useEffect() с несколькими setState() вызовами
function App() {
console.log('Rendering app...');
const [myState,setMyState] = React.useState(0);
const [booleanState, setBooleanState] = React.useState(false);
console.log('myState: ' + myState);
console.log('booleanState: ' + booleanState);
React.useEffect(()=>{
console.log('Inside useEffect...');
setMyState(1);
setMyState((prevState) => prevState +1);
setMyState(3);
setMyState(4);
setMyState(5);
setBooleanState(true);
},[]);
return(
<div>App - Check out my console!</div>
);
}
ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>