print "Hello, World!🌟";

print "Hello, World!🌟";

🌍 Привет, мир!
Cегодня первая статья из раздела #REACT, в которой поговорим про Lifecycle of Reactive Effects. Это часто задаваемый вопрос на собеседовании, и весьма важный при разработке функциональных компонентов. Для прочтения этой статьи вам потребуется некоторый опыт работы с React.

🔥 Мотивация

Понимание принципа работы Lifecycle of Reactive Effects позволит вам избегать проблем с неожиданным поведением компонентов и предотвращать утечку памяти.

✍️ Краткий обзор Effect Hooks:

UseEffect:
- Используется для работы с побочными эффектами в функциональных компонентах. Вызывается асинхронно после монтирования компонента в DOM.⁠⁠
- По умолчанию запускается после каждого рендеринга, но его можно оптимизировать с помощью массива зависимостей.⁠⁠
- Синтаксис: useEffect(setup, dependencies?)⁠⁠.
- Может включать функцию очистки, возвращаемую из функции setup .
- Запускается после того, как браузер отрисовал компонент, что делает его подходящим для большинства побочных эффектов⁠⁠ (HTTP-запросы, хранение данных, логирование и аналитика).

UseLayoutEffect:
- Похож на useEffect, но запускается синхронно сразу после изменения DOM, и перед отрисовкой на экране..
- Синтаксис аналогичен useEffect: useLayoutEffect(setup, dependencies?).
- Полезный для измерений DOM, синхронизации анимаций и других операций, которые должны произойти до отрисовки.
- Как и useEffect, может выполнять операцию очистки.

UseInsertionEffect:
- Специализированный хук для вставки стилей в DOM. Стартует синхронно ещё до любых DOM-изменений, до отрисовки в браузере, и до того, как useLayoutEffect или useEffect будут вызваны.
- Синтаксис аналогичен useEffect: useInsertionEffect(setup, dependencies?).
- Главным образом используется в библиотеках CSS-in-JS (styled Components, emotion и др.) .
- Он не имеет доступа к рефам и не может обновлять состояние.

🧠 Давайте разберем пример:
Пример - ссылка на картинку с примером

🔍 Подумайте, в каком порядке появятся логи, если не используется strictMode. Кстати про этот мод, расскажу в следующей статье о #React 📅.

Вывод:
1. App 2. useInsertionEffect 3. useLayoutEffect version: 0 4. useEffect 5. useEffect 1 version: 0 6. useEffect 2 version: 0 7. App 8. useLayoutEffect cleanup version: 0 9. useLayoutEffect version: 1 10. useEffect 1 version: 0 cleanup 11. useEffect 2 version: 0 cleanup 12. useEffect 1 version: 1 13. useEffect 2 version: 1

1. App - любой код внутри компонента (за исключением хуков) выполняется синхронно во время рендеринга компонента.
2. useInsertionEffect - как мы выяснили выше, вызывается перед useEffect и useLayoutEffect , вызывается синхронно и до отрисовки компонента на экране + единожды при монтировании из-за dependencies = [].
3. useLayoutEffect - выполняется синхронно, после изменений в DOM перед отрисовкой на экране. Поэтому логи для него появляются после useInsertionEffect, но до useEffect, исходя из начального значения version = 0 .
4. useEffect - вызывается, асинхронно, после того, как компонент отрисован в браузере + единожды при монтировании из-за dependencies = [].
5. useEffect 1 и useEffect 2 - вызываются после отрисовки в браузере. Их порядок соответствует порядку объявления в коде и выполняются с изначальным значением version = 0

Поскольку setState вызывается в первом useEffect, React запускает еще один цикл рендеринга.

1. App - код внутри функции компонента запускается снова, так как он не мемоизирован и выполняется при каждом повторном рендеринге.
2. useLayoutEffect cleanup - сначала вызывается функция очистки для старого useLayoutEffect с предыдущим значением version.
3. useLayoutEffect - выполняется перед изменениями на экране, но уже с новым значением состоянием version.
4. useEffect 1 cleanup, useEffect 2 cleanup, useEffect 1, useEffect 2 - после повторного рендеринга сначала вызываются функции очистки для данных эффектов в порядке их объявления, а затем сами эффекты выполняются в том же порядке.

💬 Делитесь мнениями в комментариях👇! Если вам понравилась статья, поставьте лайк! 👍

#REACT