How does useLayoutEffect differ from useEffect?

useEffect and useLayoutEffect are React hooks that allow you to perform side effects in functional components, but they differ in timing.

• useEffect runs after the browser has painted the updates on the screen. This means that effects set through useEffect do not block the visual update of the UI. It is typically used for asynchronous operations, subscriptions, requests, etc.

• useLayoutEffect is called synchronously immediately after all DOM mutations but before the browser has painted the updates on the screen. This allows you to perform operations that need to happen before rendering, such as measuring DOM elements or synchronizing with layout.

Example:

useLayoutEffect(() => {
  const height = ref.current.clientHeight;
  // You can immediately change the state to avoid flickering
}, []);

useEffect(() => {
  // You can perform requests, subscriptions, etc.
}, []);

Using useEffect for measuring the DOM can cause flickering because the state update occurs after rendering. useLayoutEffect helps avoid this by executing the code before the display.