Чтобы избежать ненужных обновлений в React, нужно сравнивать текущее состояние с новыми значениями перед обновлением. Такой подход помогает избежать лишних ре-рендеров и улучшает производительность.
Основная техника — использовать форму setState с функцией обновления. Внутри этой функции можно условно вернуть:
null если состояние фактически не изменилось (предотвращает ре-рендер)Представь сценарий с профилем пользователя, где информация об адресе обновляется часто:
getUserProfile = (user) => {
const latestAddress = user.address;
this.setState(state => {
if (state.address === latestAddress) {
return null; // Обновление не требуется
} else {
return { address: latestAddress }; // Обновить состояние
}
});
};
Этот паттерн предотвращает ре-рендер компонента когда состояние не изменилось, что особенно полезно когда:
Для классовых компонентов, использующих этот паттерн, стоит рассмотреть переход на функциональные компоненты с хуками useMemo или useCallback — они предоставляют более понятные стратегии оптимизации в современной разработке на React.
Возврат null из функции updater в setState предотвращает перерендер, сигнализируя о том, что состояние не изменилось значимым образом.
Новый — ещё не проверен сообществом
Вы