React Hook API (useEffect vs useLayoutEffect)
Both have similar spellings and are used to process effects. So what’s the difference here? The difference is how they work.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <span class="token function">useEffect</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// làm gì đó</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// clean up</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token function">useLayoutEffect</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// làm gì đó</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// clean up</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span> |
Most of us use our own UseEffect. And one beautiful day I noticed when using the useEffect to set data initially instead of componentDidMount
in the class component
, the phenomenon of slight flickering was quite annoying.
useEffect
When moving from class component
to function component
, you will have to touch React Hook. useEffect
replaces componentDidMount
, componentWillUpdate
, componentWillUnMount
, and is often used to fetching data
the results will not change immediately.
useEffect
will be run after rendering the component . In the above example, when we click the button
to change the value, the component will render, return the UI, then run useEffect, in useEffect we change the value of the state
so react
will re-render again to redraw. UI.
The order of implementation is as follows:
- You will cause an event (change state / props, re-render from parent component, …)
- Render component.
- Updated UI screen.
- Run useEffect.
In this case we should use useLayoutEffect
useLayoutEffect
If you see a jerky phenomenon, use it to measure position in the DOM (measure position of element, …) try useLayoutEffect
. It is similar to useEffect but different from how it is run. useLayoutEffect
will run before updating the UI.
The order of implementation is as follows:
- You will cause an event (change state / props, re-render from parent component, …)
- Render component.
- Run useLayoutEffect, and react will wait until it completes.
- Updated UI screen.
Editing using useLayoutEffect
will have the following result:
This is the result we expected.
summary
- useEffect : Will be the right choice, helping optimize the running speed from waiting for what is often used to
fetching data
. - useLayoutEffect : But if you want to handle synchronization with the UI, use
useLayoutEffect
References: