Say no to "flickering" UI: useLayoutEffect, painting and browsers story
Вставка
- Опубліковано 19 кві 2023
- 👉 Advanced React Book: www.advanced-react.com
👉 Say no to "flickering" UI: useLayoutEffect, painting and browsers story: www.developerway.com/posts/no...
💬 Twitter: / adevnadia
💬 Linkedin: / adevnadia
👩🏼💻 simple navigation with useEffect, broken: codesandbox.io/s/simple-respo...
👩🏼💻 simple navigation with useLayoutEffect, fixed: codesandbox.io/s/simple-respo...
👩🏼💻 synchronous javascript example: codesandbox.io/s/understandin...
👩🏼💻 asynchronous javascript example: codesandbox.io/s/understandin...
👩🏼💻 navigation in nextjs, broken: codesandbox.io/p/sandbox/simp...
A very important, although quite rare, topic when it comes to dealing with DOM, is how to change elements based on real DOM measurements like the size or position of an element. Based on this article: www.developerway.com/posts/no...
Looking into:
* what is the problem with it exactly and why useEffect hook doesn’t help here
* how useLayoutEffect can fix the problem
* how the fix actually works, what is painting, rendering and why we need to know this
* how SSR-first frameworks like Nextjs play a role in all of this
#react #reactjs #webdevelopment #programming #frontend #frontenddeveloper #js #javascript
I seriously love the way you story tell. Whenever you introduce a concept, I'll go why, and then next thing you know, you present the why. I wish you get more views, subscribers and everything else that's good so you don't stop making these videos.
Thank you so much 😊
You have the best videos with React. I see you're doing some advanced topics, but please take a look at more basic once. Such as component lifecycle, basic hooks, and VDOM. Thank you for your time!
Another fantastic video. Your ability to dive deep into these topics is very much appreciated
Thank you for sharing your insights, @developerwaypatterns your explanation has been very helpful in clarifying some concepts for me regarding browsers and React. Based on my experience with this project, I have decided to utilize CSS media queries as my approach to tackle the issue at hand.
I have learned so much in this video. Thanks for making it.
Loved the Way you have been connecting the DOTs to explain complex things easier.
I knew about just a very basic difference between useEffect and useLayoutEffect before this. This video was quite informative and helpful. Thanks a lot!
Awesome as always! Thank you so much, Nadia! ♥
Glad you like it 😊
I drop what im doing to check out your informative breakdowns, thanks for sharing these insights :)
Very clear and concise explanation!
Thank you! 😊
Thank you🙂
Спасибо! Чуть-чуть засталкил тебя, когда решал стоит ли покупать твою книгу)
😅😅
You do great stuff. It will be great to see some content about React app architecture patterns.
Thank you! This is indeed a very interesting topic, but it's very broad. Do you have something more specific that interest you the most there?
@@developerwaypatterns It would actually be great if you touched on things like FSD, modular architecture, atomic design and maybe microfrontends, but I'm personally interested in Feature-Sliced Design right now or if you suggest something you know and it would be nice to see a series of explanations with a basic maybe CRUD application. In general, I'm interested in building a clean architecture. Thank you for your attention and I respect your content for digging deeper.
Thank you, those are great topics! I don't have recommendations out of the top of my head, but I'll think a bit more whether I can do some articles/videos on some of them
I have doubt.. can we dynamically insert element to the list until it doesn't fit.
like here we first first render it initially and call useLayoutEffect hook which will calculate the width of the elements before the painting ..but can we do it dynamically calculating on the go and inserting element to list if not why not?
My guess is I don't think you can layout multiple times without creating a poor experience, especially not within the same "frame".