Как будто рассуждать о жизненных циклах компонентов в компонентах класса React было недостаточно, все стало еще сложнее с появлением функциональных компонентов React и ловушки useEffect. Вот как я их использовал.
- Начните с пустого массива зависимостей. Это означает, что ваш эффект будет запущен только один раз. Часто это именно то, что вам нужно.
- Включите правило Exustive-deps из eslint-plugin-react-hooks в вашей конфигурации ESLint. Это даст вам предупреждение, если ваш эффект использует зависимости, которые вы не фиксируете в своем массиве зависимостей.
- Думайте о массиве зависимостей как о «когда этот эффект сработает», не о том, будет ли. Это означает, что эффект будет выполняться всякий раз, когда что-либо в массиве зависимостей изменилось.
- Чтобы лучше контролировать будет ли этот эффект работать, рассмотрите возможность использования ref. Например, если вы хотите запустить этот эффект только один раз, использование ссылки может сделать его детерминированным (и его будет легче понять при чтении кода). Это может быть полезно, например, если ваш массив зависимостей содержит контекст, который может быть изменен другим компонентом без вашего ведома.
Конечно, философия React заключается в том, что нет единого способа делать что-то, и нет «единственного благословенного способа» в документации. Вот почему этот пост называется «Как я использую useEffect в React». Предостережение для покупателя :)
