sayzardAiden Bai (@aidenybai)
코딩 에이전트들이 여전히 가장 명백한 실수들(예: fetch를 useEffect에서 쓰는 경우)에 걸려 충돌하는 문제가 있고, 작성자는 이 문제를 곧 고칠 것이라고 알리고 있습니다.
HabrsetTimeout убил наши анимации: история спасения модальных окон
Всем привет! Давайте представим, что от бизнеса поступил запрос: "Нам надо, чтобы при входе на сайт сразу же открывалось модальное окно авторизации для сканирования клиентского QR-кода." Вы запускаете стабильно работающий проект, применяете useEffect с необходимой фичей и пустой зависимостью, а затем - начинаете тестировать. И вот незадача: модальное окно открывается на миллисекунду и моментально закрывается. При этом: логи в порядке, стейты меняются корректно, но модальное окно живет своей жизнью и наотрез отказывается работать, как ей предписано. Я потратил довольно длительное время на поиски этой ошибки. Но затем, удалив setTimeout , который мы использовали для анимирования модального окна, заметил, что все стало работать корректно. Длительный поиск вариантов анимирования открытия/закрытия модального окна не помог. Но стоит отметить, что я узнал множество способов и комбинаций его анимирования: как при помощи сторонних зависимостей, так и нативных. Использование сторонних зависимостей я отбросил сразу. Смириться, что все модальные окна на проекте отныне будут работать без красивых анимаций я не мог, поэтому сразу же приступил к поискам решения данной проблемы. Совершенно случайно наткнувшись на статью @GragertVD , которая, словом, не подходила под мои критерии поиска - я открыл для себя совершенно новый обработчик события onAnimationEnd и наконец решил указанную выше проблему. Именно поэтому мне захотелось рассказать о том, как я это сделал. В этой статье я расскажу:
https://habr.com/ru/articles/954624/
#settimeout #onAnimationEnd #React_анимации #useEffect #Tailwind_CSS #createPortal #конфликт_состояний #прерывание_анимаций #Открывается_и_сразу_закрывается #useAnimation_хук
Learn JavaScript, React, and TypeScript to Node.js, Fullstack, and BackendDon’t Sleep on AbortController
https://fed.brid.gy/r/https://frontendmasters.com/blog/dont-sleep-on-abortcontroller/
Qiita - 人気の記事
Katrin ZaksI’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/
React Internals: Which useEffect runs first?
https://fed.brid.gy/r/https://frontendmasters.com/blog/react-internals-which-useeffect-runs-first/
Curtis CarterThis includes chained #useEffect hooks in #ReactJS where each effect changes state that triggers the next useEffect. At least in those cases it tends to all happen in one place
Thomas Michael SemmlerSo, you're fetching data with #useEffect and you need to make a state update to set an error, when something along the line of the fetch went wrong. But the linter complains that you now need to include the error state variable in its dependency array. But now, when there is an error, it will run in a loop because it runs whenever the error state var is updated, which it does when there is an error.
What is the intended pattern here? #react #javascript #webdev
Hydration mismatch回避にuseEffectを使うな
https://qiita.com/ssssota/items/51278dc5d51801dfb3fc?utm_campaign=popular_items&utm_medium=feed&utm_source=popular_items