← React Beginner Questions - Set 10 Q96

What is the difference between useEffect and useLayoutEffect?

React Beginner Questions - Set 10

Example

1
2

useLayoutEffect(() => { setHeight(ref.current.offsetHeight); }, []);  // before paint
useEffect(() => { fetchData(); }, []);                                // after paint

What to notice

• Use the layout variant only to measure or correct what the user would otherwise see wrong.