midReact Native
What is difference between useEffect and useLayoutEffect?
Updated May 6, 2026
Short answer
useEffect runs after render; useLayoutEffect runs before painting.
Deep explanation
useLayoutEffect is synchronous and blocks rendering until completion, useful for measuring layout or DOM updates. useEffect is asynchronous and does not block painting.
Real-world example
Measuring component size before animation.
Common mistakes
- Using useLayoutEffect unnecessarily causing performance issues.
Follow-up questions
- When should useLayoutEffect be avoided?
- Which runs first?