When are useEffect and useLayoutEffect called?

useEffect is called after React has rendered the component and updated the DOM. This means that the effect runs asynchronously after the browser has painted the updates, allowing the visual update not to be blocked.

useLayoutEffect is called synchronously immediately after React has applied all changes to the DOM, but before the browser has had a chance to paint the updates on the screen. This allows performing operations that need to happen before rendering, such as measuring the DOM or synchronous manipulations of elements.

Example:

useEffect(() => {
  // Here you can make requests, subscriptions, update state
}, []);

useLayoutEffect(() => {
  // Here you can measure element sizes and immediately apply changes
}, []);