React Interview Questions

In React, both useEffect and useLayoutEffect hooks are used to perform side effects in functional components. However, they differ in when they are executed within the component lifecycle.

useEffect

The useEffect hook runs after the render is committed to the screen. It is useful for performing actions that don't block the browser from painting, such as fetching data, subscribing to events, or updating the DOM.

Characteristics:

1. Non-blocking: It does not block the painting of the browser.
2. Asynchronous: The execution of useEffect is asynchronous and happens after the DOM updates are painted.
3. Common Use Cases: Data fetching, setting up subscriptions, and manually changing the DOM.

Example:

import React, { useEffect, useState } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Perform data fetching or other side effects here
    fetch('/api/data')
      .then(response => response.json())
      .then(data => setData(data));

    return () => {
      // Clean up subscriptions or other side effects
    };
  }, []); // Empty dependency array means this effect runs once after the initial render

  return <div>{data ? data.message : 'Loading...'}</div>;
}

useLayoutEffect

The useLayoutEffect hook runs synchronously after all DOM mutations but before the browser has a chance to paint. It is useful for performing actions that need to be done immediately after the DOM updates, such as reading layout properties or synchronously re-rendering.

Characteristics:

1. Blocking: It blocks the painting of the browser until the effect is executed.
2. Synchronous: The execution of useLayoutEffect is synchronous and happens immediately after the DOM updates but before the browser paints.
3. Common Use Cases: Measuring the DOM, synchronously updating the DOM, and reading layout properties.

Example:

import React, { useLayoutEffect, useRef, useState } from 'react';

function MyComponent() {
  const [width, setWidth] = useState(0);
  const divRef = useRef(null);

  useLayoutEffect(() => {
    // Perform actions that need to be synchronous, such as measuring the DOM
    if (divRef.current) {
      setWidth(divRef.current.offsetWidth);
    }
  }, []); // Empty dependency array means this effect runs once after the initial render

  return <div ref={divRef}>Width: {width}px</div>;
}

Key Differences

1. Timing of Execution:

   • useEffect: Runs after the render and paint.
   • useLayoutEffect: Runs after the render but before the paint.

2. Performance Impact:

   • useEffect: Non-blocking, better for performance, doesn't block painting.
   • useLayoutEffect: Blocking, can lead to performance issues if overused, as it blocks painting.

3. Use Cases:

   • useEffect: Suitable for side effects that don't require immediate DOM updates, such as data fetching, subscriptions, and logging.
   • useLayoutEffect: Suitable for side effects that need to read layout from the DOM or synchronously make changes to the DOM before it is painted, such as measuring DOM nodes and applying styles that depend on DOM measurements.

When to Use Which Hook

• Use useEffect for most side effects that do not require synchronous execution. It allows the browser to paint first and then run the effect, which is more performant and usually what you need.
• Use useLayoutEffect when you need to perform side effects that must occur before the browser paints, such as measuring the DOM or performing calculations that affect the render output immediately.

Conclusion

While both useEffect and useLayoutEffect hooks serve to handle side effects in functional components, they are suited to different types of tasks based on when they execute in the rendering lifecycle. Choosing the right hook based on your requirements can help ensure optimal performance and proper behavior of your React applications.