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?

More React Native interview questions

View all →