Hooks in React.js

React Hooks are functions that let you “hook into” React’s state, lifecycle, and other features from functional components — without writing class components.

Below is a full breakdown of the built-in React Hooks (as of React 18):

---

🧠 1. useState

Manages local component state.

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

• count: current state
• setCount: function to update it

---

🔁 2. useEffect

Performs side effects (like API calls, timers, event listeners).

useEffect(() => {
  console.log("Component mounted or updated");
}, []);

• Empty dependency [] = runs once (on mount)
• Add variables to [] = runs when they change

---

🔄 3. useContext

Accesses the React Context value without prop drilling.

const user = useContext(UserContext);

• Used with createContext() + <Provider>

---

🔧 4. useReducer

Advanced alternative to useState for complex state logic (like Redux).

const [state, dispatch] = useReducer(reducerFn, initialState);

• Great for managing state with actions and types

---

🪝 5. useRef

Creates a mutable reference that persists across renders.

const inputRef = useRef(null);

• Commonly used to access DOM elements or hold values without causing re-renders

---

⏱️ 6. useMemo

Memoizes (remembers) expensive calculations to avoid recomputation.

const result = useMemo(() => computeExpensiveValue(a, b), [a, b]);

---

📌 7. useCallback

Memoizes functions so they’re not recreated on every render.

const handleClick = useCallback(() => {
  doSomething();
}, []);

---

🔄 8. useLayoutEffect

Like useEffect, but fires synchronously after all DOM mutations (rarely used).

---

🧪 9. useImperativeHandle

Used with forwardRef to expose specific methods to parent components.

useImperativeHandle(ref, () => ({
  customMethod: () => { ... }
}));

---

🧬 10. useId (React 18+)

Generates unique IDs for accessibility and SSR.

const id = useId(); // Useful in forms

---

📡 11. useTransition (React 18+)

Lets you mark updates as non-urgent to keep the UI responsive.

const [isPending, startTransition] = useTransition();

---

📊 12. useDeferredValue (React 18+)

Defers re-rendering of a non-critical value.

---

💬 Summary Table:

Hook	Purpose
useState	Local state management
useEffect	Side effects (e.g., API calls)
useContext	Access context value
useReducer	Complex state logic
useRef	Persistent mutable value / DOM access
useMemo	Memoize computed values
useCallback	Memoize functions
useLayoutEffect	DOM measurements (before paint)
useImperativeHandle	Custom instance values with refs
useId	Unique IDs (SSR-friendly)
useTransition	Prioritize UI updates
useDeferredValue	Defer non-urgent values