useEffect: зависимости и очистка
Вопрос
Как работает useEffect: когда запускается, зачем массив зависимостей и функция возврата?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
эффект запускается после коммита и отрисовки
пустой массив - один раз при монтировании
без массива - после каждого рендера
возвращённая функция - очистка, вызывается перед следующим запуском и при размонтировании
зависимости сравниваются поверхностно через Object.is
в StrictMode в разработке эффект намеренно запускается дважды
Что могут спросить следом
- Чем useLayoutEffect отличается и когда он нужен
- Почему объект в зависимостях вызывает бесконечный цикл
- Что делать, если функция-зависимость меняется каждый рендер
Разбор
useEffect выполняется после того, как React применил изменения к DOM и браузер
отрисовал кадр. Массив зависимостей определяет, повторять ли эффект: пустой - только
при монтировании, отсутствующий - после каждого рендера, с элементами - при изменении любого
из них по Object.is.
Возврат - функция очистки. Она вызывается не только при размонтировании, но и перед каждым повторным запуском: отписаться от старого, подписаться на новое. Без неё получаем утечки и гонки.
В StrictMode в разработке React монтирует компонент дважды именно чтобы вскрыть эффекты без очистки. Это не баг сборки - это проверка.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.