Жизненный цикл реактивных эффектов useEffect

В этом уроке расскажу про жизненный цикл компонентов и эффектов.
Вот, что следует запомнить:
- Компоненты могут монтироваться, обновляться и размонтироваться.
- Каждый Эффект имеет отдельный жизненный цикл от окружающего компонента.
- Каждый Эффект описывает отдельный процесс синхронизации, который может запускаться и останавливаться.
- Когда вы пишете и читаете Эффекты, думайте с точки зрения каждого отдельного Эффекта (как запустить и остановить синхронизацию), а не с точки зрения компонента (как он монтируется, обновляется или размонтируется).
- Значения, объявленные внутри тела компонента, являются "реактивными".
- Реактивные значения должны повторно синхронизировать Effect, поскольку они могут меняться со временем.
- Линтер проверяет, что все реактивные значения, используемые внутри Эффекта, указаны в качестве зависимостей.
- Все ошибки, отмеченные линтером, являются легитимными. Всегда есть способ исправить код, чтобы не нарушать правила, вместо того, чтобы писать `// eslint-ignore-next-line react-hooks/exhaustive-deps`.
Документация: react.dev/lear...
Подпишитесь, чтобы не пропустить выход новых видео. Ставьте лайк, чтобы поддержать канал.
Мои статьи по веб-разработке доступны на devsurge.ru.

[@ghoulking715]

Тяжело 🚬

[@devsurge-official]

Сочувствую!
Нужно лишь запомнить, что эффект делает 2 вещи - начинает и заканчивает синхронизацию.
Синхронизация начинается, когда компонент маунтится. Останавливается, когда компонент анмаунтится (при условии, что указана cleanup функция). А когда меняется значение зависимости - остановится предыдущая синхронизация и начнется новая.
Прежде чем двигаться дальше, рекомендую сделать все задания здесь:
react.dev/learn/lifecycle-of-reactive-effects#challenges