React Hooks: What is the difference between 'useMutationEffect' and 'useLayoutEffect'?

Question

What is the difference between useMutationEffect and useLayoutEffect in term of usage?

I have read all available material online including (but not limited to)

1. Hooks Reference
2. Blog post by Kent

Difference between useEffect and other two hooks is clear. but difference between useMutationEffect and useLayoutEffect is still not clear.

I know the order of execution is:

1. useMutationEffect
2. useLayoutEffect
3. useEffect

Zumwalt

Answer 1

First, you have to understand the different phases of Rendering.

A DOM mutation that is visible to the user must fire synchronously before the next paint so that the user does not perceive a visual inconsistency. We should use either useMutationEffect or useLayoutEffect for this specific case to perform blocking visual updates. The only difference between these two is we should use useLayoutEffect if we want to read Layout from the DOM. Otherwise, we should use useMutationEffect.

1. useMutationEffect

It fires synchronously before Layout phase i.e. during the same phase that React performs its DOM mutations. Use it to perform blocking custom DOM mutations without taking any DOM measurement/reading layout.

2. useLayoutEffect

It fires synchronously after all DOM mutations but before Paint phase. Use this to read layout(styles or layout information) from the DOM and then perform blocking custom DOM mutations based on layout.

3. useEffect

It runs after the render is committed to the screen i.e. after Layout and Paint phase. Use this whenever possible to avoid blocking visual updates.

Update: useMutationEffect hook has been removed from Hooks API in this PR. (Credits: Dhaval Patel)

Zumwalt

Answer 2

useLayoutEffect

When DOM manipulating code in the hook and only reading layout.

useEffect

When DOM manipulating code in the useEffect and see screen flickering move this code to useLayoutEffect. Thats why useEffect sometimes fires before paint.

Image attached for for better understanding

Etymon

Answer 3

useEffect vs. useLayoutEffect

useLayoutEffect runs before the useEffect hook. This is because the useLayoutEffect is fired synchronously after DOM gets mutated and before the browser paints the new changes.

This means that the useEffect hook will get triggered right after the browser paints which is what we want in this case. So using the useEffect hook is what is recommended here. You should use the useLayoutEffect when you are directly updating the DOM to avoid flickering. Also another thing to note here is that useEffect runs in an asynchronous fashion whereas the useLayoutEffect runs in a synchronous fashion. So the difference is in the time at which these functions get invoked.

Kilmarnock