Introduction
Not long ago, React made a major update to its functional components (in version 16.8 in March 2019), and finally provided a way for these components to becomeStaticmethod.
The addition of hooks not only means that functional components will be able to provide their own state, but also manage their own lifecycle events by introducing useEffect hooks.
In addition, this update also introduces a brand new useLayoutEffect hook, according toReact Documentation, its function is with [useEffect](/tutorials/i… in a new tab) The functions of hooks are quite similar; so this raises a problem. What is the difference between the two?
If you are not familiar with hooks, I suggest you check it outThis articleThere you will have a good idea of what they are, what they are for, and how you can use them in your application.
In this post, we will look deeper into the role of each hook, what the difference is, and by the end, you should have a better understanding of how they each work, when to use one of them instead of the other, and some common pitfalls of falling in love with one of them.
Overview of useEffect hooks
This hook was initially added as another way to deal with side effects in functional components, similar to the componentDidMount and componentDidUpdate methods in class-based components (which also run at the same time).
Therefore, its equivalent in a class-based component is a combination of componentDidMount, componentDidUpdate, and componentWillUnmount methods, which is an effect in a callback statement passed as an argument to the hook.
Hook Process
- You cause rendering in some way (the state is updated or the parent class is re-rendered).
- React renders your component (called it)
- The screen gets visual updates
- Then run useEffect
Overview of useLayoutEffect hook
Similar to useEffect, it runs simultaneously with componentDidMount and componentDidUpdate in Class Components. However, useLayoutEffect runs synchronously, contrary to useEffect, which means that the callbacks it receives are called only after the V-DOM calculations are performed in the component, but before they are drawn to the actual DOM.
This means that if we really need to do any JavaScript query on any DOM element, useLayoutEffect is the hook we may need.
Hook Process
- You cause rendering in some way (changing the state, or re-rendering the parent class).
- React renders your component (called it)
- useLayoutEffect runs, React waits for it to complete.
- The screen is visually updated
When to use the useLayoutEffect hook?
When using the useEffect hook, there is a common problem that when a component's state is updated, it may "flash". This is because when the component continues to perform asynchronous calculations, it will first render in a partially ready state, and then re-render in the final state.
This is a good instruction you might want to use the useLayoutEffect hook instead.
An example like this is an attempt to generate and render an extremely high value when a button is clicked, like in this example:
import { useState, useEffect } from 'react';
import './';
function App() {
const [value, setValue] = useState(0);
useEffect(() => {
if (value === 0) {
setValue(10 + () * 200);
}
}, [value]);
('render', value);
return (
<div className="App">
<p>Value: {value}</p>
<button onClick={() => setValue(0)}>
Generate Random Value
</button>
</div>
);
}
export default App;
If we are going to check how our app behaves, we will see a constantly changing flashing number every time we press the button.
Components that flash when status updates
If we use the useLayoutEffect hook, we can get rid of this visual error.
import { useState, useLayoutEffect } from 'react';
import './';
function App() {
const [value, setValue] = useState(0);
useLayoutEffect(() => {
if (value === 0) {
setValue(10 + () * 200);
}
}, [value]);
('render', value);
return (
<div className="App">
<p>Value: {value}</p>
<button onClick={() => setValue(0)}>
Generate Random Value
</button>
</div>
);
}
export default App;
And, as you can see from the last video sample, we have been able to get rid of the flickering effect.
This is because the behavior of the two hooks is slightly different; the first hook is asynchronously processing calculations and DOM rendering, while the latter performs calculations first and then processes the rendering of the calculation results on the screen.
In our case, this means that the useEffect hook is trying to generate a random value and render it to the screen at the same time. On the other hand, the useLayoutEffect hook tries to complete the calculation first and then show us the generated numbers.
Summarize
As you have noticed, the useLayoutEffect hook provides us with a clean solution to the problem we may find ourselves often fighting with, which is being entangled by the way React handles both DOM drawing and computing.
As a revelation, you might want to use the useLayoutEffect hook when you are processing ref values or need to do any kind of work around querying DOM elements through vanilla JavaScript methods such as querySelector, querySelectorAll, or any other way.
Remember that although the useLayoutEffect hook provides us with a lot of useful things, in 99% of cases, you'd better use the useEffect hook because it often has higher performance due to its asynchronous nature.
So, that's it.
Hopefully you have now got a better understanding of how these two hooks are used, and the scenarios where each hook might come in handy; this is also particularly common because it is used quite rarely, either because the developer doesn't know it or it's not sure about its specific role.
The above is the detailed explanation of the useLayoutEffect hook usage scenario in React. For more information about React useLayoutEffect hook, please follow my other related articles!