Q97- What are React Hooks? Difference between useEffect and useLayoutEffect?

What are React Hooks?

• Hooks are special functions that let you use state and lifecycle features in functional components.
• Introduced in React 16.8 to avoid using class components for state management and side effects.

Common Hooks:

• useState → manage state
• useEffect → handle side effects (API calls, subscriptions)
• useContext → consume context
• useRef → access DOM or persist values
• useReducer → complex state management
• useMemo & useCallback → optimize performance

Example:

import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

---

🧠 2️⃣ Difference Between useEffect and useLayoutEffect

Feature	useEffect	useLayoutEffect
Execution Time	After render & painting on screen	After render but before painting
Blocking UI	Does not block UI updates	Blocks rendering until effect runs
Use Case	Fetching data, subscriptions, timers	Reading layout, measuring DOM, synchronously updating DOM
Performance	Non-blocking → better for most side effects	Blocking → use sparingly

---

Example: useEffect vs useLayoutEffect

import React, { useEffect, useLayoutEffect, useRef } from "react";

function Demo() {
  const divRef = useRef();

  useLayoutEffect(() => {
    // Runs before painting
    console.log("Div width (layout):", divRef.current.offsetWidth);
  }, []);

  useEffect(() => {
    // Runs after painting
    console.log("Effect after paint");
  }, []);

  return <div ref={divRef}>Hello World</div>;
}

• useLayoutEffect → used for synchronous DOM measurements
• useEffect → used for asynchronous side effects like API calls

---

⚡ In short:

React Hooks allow functional components to have state and lifecycle features.
Use useEffect for non-blocking side effects, and useLayoutEffect for DOM measurements before painting.