🚨 NEWS: React Hooks: useState, useEffect, useRef, useMemo, useCallback — Guida Completa e Operativa

Ecco i punti chiave in breve:
💡 State usando React e vi sembra che i componenti si ri-renderizzino senza motivo? O vi capita di leggere uno stato vecchio dentro un effetto? Siamo passati da classi a funzioni, ma gli hook non sono...

🚀 LINK: https://meteoraweb.com/analisi-dei-dati-e-metriche/react-hooks-usestate-useeffect-useref-usememo-usecallback-guida-completa-e-operativa

#reactHooks #useState #useEffect #useRef #useMemo

Reactで「useEffectを使わなくてよいパターン」をReact公式より整理する
https://qiita.com/ryo_sh/items/537094e2ad68f9275710?utm_campaign=popular_items&utm_medium=feed&utm_source=popular_items

#qiita #React #useEffect

useEffectを何となく使っていた自分が、React公式を読んで正しい使い方を学び直した
https://qiita.com/ryo_sh/items/330a378b024562c9e097?utm_campaign=popular_items&utm_medium=feed&utm_source=popular_items

#qiita #React #useEffect

... it never before occurred to me to name the function I pass to `useEffect()`...

https://neciudan.dev/name-your-effects

#React #NextJS #useEffect

setTimeout убил наши анимации: история спасения модальных окон

Всем привет! Давайте представим, что от бизнеса поступил запрос: "Нам надо, чтобы при входе на сайт сразу же открывалось модальное окно авторизации для сканирования клиентского QR-кода." Вы запускаете стабильно работающий проект, применяете useEffect с необходимой фичей и пустой зависимостью, а затем - начинаете тестировать. И вот незадача: модальное окно открывается на миллисекунду и моментально закрывается. При этом: логи в порядке, стейты меняются корректно, но модальное окно живет своей жизнью и наотрез отказывается работать, как ей предписано. Я потратил довольно длительное время на поиски этой ошибки. Но затем, удалив setTimeout , который мы использовали для анимирования модального окна, заметил, что все стало работать корректно. Длительный поиск вариантов анимирования открытия/закрытия модального окна не помог. Но стоит отметить, что я узнал множество способов и комбинаций его анимирования: как при помощи сторонних зависимостей, так и нативных. Использование сторонних зависимостей я отбросил сразу. Смириться, что все модальные окна на проекте отныне будут работать без красивых анимаций я не мог, поэтому сразу же приступил к поискам решения данной проблемы. Совершенно случайно наткнувшись на статью @GragertVD , которая, словом, не подходила под мои критерии поиска - я открыл для себя совершенно новый обработчик события onAnimationEnd и наконец решил указанную выше проблему. Именно поэтому мне захотелось рассказать о том, как я это сделал. В этой статье я расскажу:

https://habr.com/ru/articles/954624/

#settimeout #onAnimationEnd #React_анимации #useEffect #Tailwind_CSS #createPortal #конфликт_состояний #прерывание_анимаций #Открывается_и_сразу_закрывается #useAnimation_хук

Don’t Sleep on AbortController

https://fed.brid.gy/r/https://frontendmasters.com/blog/dont-sleep-on-abortcontroller/

useEffectEventを理解する
https://qiita.com/tachu/items/a8a14ead9028d6932338?utm_campaign=popular_items&utm_medium=feed&utm_source=popular_items

#qiita #フロントエンド #React #useEffect #useEffectEvent

I’m digging into how useEffect behaves in React — and the render queue timing still surprises me sometimes.

It’s wild how something that seems so “after render” can still feel like it sneaks into your logic when you least expect it.

A huge help with that was a blog post on Frontend Masters written by Teng Wei Herr: https://frontendmasters.com/blog/react-internals-which-useeffect-runs-first/

#ReactJS #React #useEffect #FrontendDev #LearningInPublic

React Internals: Which useEffect runs first?

https://fed.brid.gy/r/https://frontendmasters.com/blog/react-internals-which-useeffect-runs-first/