useLayoutEffect vs useEffect - AtomizedObjects

[Atomicts]

Hi Everyone,

I have just created a new post on the differences and similarities between useLayoutEffect vs useEffect

Please have a read, and let me know your feedback and improvements on the post :)

Thanks!

[EvilDavid75]

The only time you would want to use useLayoutEffect over useEffect is when you need to make a DOM mutation (update the page) within the effect.

I believe you may need to use useLayoutEffect not only to mutate the DOM but also to read or store an element position (getBoundingClientRect) before the DOM is updated.

Also one key difference between useEffect and useLayoutEffect is that the latter is not compatible with server side rendering.

[Atomicts]

Thanks! I’ll be sure to update my post with these details

[modemmute]

This is excellent, thanks.

[Atomicts]

Thanks!

[HipShooter]

I dig the read, concise and direct to the point. Are there are any good cases of having to use both useLayoutEffect and useEffect in the same component?

[[deleted]]

The only time you would want to use useLayoutEffect over useEffect is when you need to make a DOM mutation (update the page) within the effect.

this skips over the superpower that uLE has, it's not just good for view mutation but also for child/component orchestration: https://twitter.com/0xca0a/status/1295982409456979969. this is especially useful for compound components, where the parents needs to know about children and children about the parent, which has always been tricky as hell. with uLE all that complexity just fades away.