React Hooks: useLayoutEffect

PublishedSeptember 19, 2021

Furkan is a software engineer and frontend developer, whose main purpose is to create best optimal experience for user but also keeping the application or project as performant as possible.

He is deeply interested on web technologies and he is building new projects in this subject. He is especially familiar with React, Vue, Node and Java. You can check out what he built on his GitHub account. There is potential ways to connect with him at the end of this summary 👇

Things he like to do; ✔ Trying to solve other people's struggles ✔ Teaching or telling some subject he know to friends or colleagues ✔ Building different kinds of projects ✔ Meeting & talking with new people ✔ Listening podcasts ✔ Playing Chess ✔ Watching drama | sci-fi movies ✔ Listening music while I travelling or trying to fix problems ✔ Researching next generation technologies like cyptocurrency, IoT, smart devices

If you want to reach out with him, here is how you can do it;

🔼 Blog: https://blog.furkanozbek.com/ 🔼 GitHub: https://github.com/afozbek 🔼 Mail: abdullah.furkan.ozbek@gmail.com 🔼 Twitter: https://twitter.com/afozbek_ 🔼 Instagram: https://instagram.com/furkan.codes/

Thanks for reading ✨

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

6 Tips To Achieve Your Goal

1 - Define Your Goals The first thing you need to do is defining what you want to do to keep you motivated. It can be working full time in a developer job or learning a new language. 2 - Create a Schedule Then give which time of the day/week you can...

Sep 17, 20212 min read

How to Deploy Your App to Netlify

1. Push Your Code to Any Version Control Applications The first thing you need to do is push your git repository to any version control application. You can use any one of these; Github Gitlab Bitbucket 2. Register to Netlify Once you have a reposi...

Sep 16, 20212 min read

5 Ways To Host Your Applications

1. Surge Surge is a cloud platform for hosting static websites, which is extremely simple to use but offers customization options for those who need them. 2. Firebase Firebase Hosting is a fully managed hosting service for static and dynamic content...

Sep 15, 20211 min read

Array methods that you should know

1- findIndex The findIndex() method returns the index of the first element in the array that satisfies the provided testing function. Otherwise, it returns -1, indicating that no element passed the test. const array1 = [5, 12, 8, 130, 44]; const isL...

Sep 14, 20212 min read

Furkan's Notes

46 posts

1 - Definition

useLayoutEffect runs synchronously immediately after React has performed all DOM mutations.

This can be useful if you need to make DOM measurements (like getting the scroll position or other styles for an element) and then make DOM mutations or trigger a synchronous re-render by updating state.

2 - Snytax

It looks exactly like useEffect but different use-cases. Here is the syntax for it;

useEffect(() => {
  // do side effects
  return () => /* cleanup */
}, [dependency, array]);

useLayoutEffect(() => {
  // do side effects
  return () => /* cleanup */
}, [dependency, array]);

3 - useEffect vs useLayoutEffect

useEffect (Component > State Changes > Component Renders > Rendered Component is Printed on Screen > useEffect runs)

useEffect will run after React renders your component and ensures that your effect callback does not block browser painting.

useLayoutEffect (Component > State Changes > Component Renders > useLayoutEffect runs > Rendered Component is Printed on Screen)

useLayoutEffect runs synchronously immediately after React has performed all DOM mutations.

4 - One Possible Example

If your effect is mutating the DOM (via a node ref) and the DOM mutation will change the look of the DOM node between the time that it is rendered and your effect mutates it, then you want to use useLayoutEffect.

Otherwise the user could see a flicker when your DOM mutations take effect. This is pretty much the only time you want to avoid useEffect and use useLayoutEffect instead.

5 - Summary

Try use useEffect most of the time, if you are really need to mutate dom directly go take a look similar examples first before applying useLayoutEffect.

useLayoutEffect: If you need to mutate the DOM and/or do need to perform measurements
useEffect: If you don't need to interact with the DOM at all (%99.99 of the time you will use this)

Command Palette