What is the difference between useEffect and useLayoutEffect?

React hooks and effects · Freshers and experienced

Model answer

useEffect runs after the browser has painted. useLayoutEffect runs after the DOM updates but before the browser paints, so you can measure layout and change it without a visible flicker. It blocks painting, so use it only when needed, such as measuring an element's size for a tooltip position.

Neither runs on the server during server rendering.

Learn this topic

React useEffect Explained: Side Effects, Dependencies and Cleanup in the course React.js Full Course: Beginner to Advanced.

Sign in to add your own answer.

More questions

• What are hooks, and what are the rules of hooks?
• What does useEffect do?
• What does the dependency array of useEffect mean?
• Why does an effect run twice in development?
• What is the cleanup function in useEffect, and when does it run?
• How do you fetch data in a React component with useEffect?