Q292- What are React Hooks? Why were they introduced? Explain in depth with examples.

What Are React Hooks?

React Hooks are functions that let you use state, lifecycle features, and other React capabilities inside functional components.

Hooks were introduced in React 16.8.

Before Hooks:

• State and lifecycle → only in class components
• Functional components → stateless

Hooks changed that.

---

🧠 Why Were Hooks Introduced?

Hooks were introduced to solve real problems with class components.

---

❌ Problems with Class Components

1️⃣ Complex and confusing lifecycle methods

componentDidMount()
componentDidUpdate()
componentWillUnmount()

Logic for one feature often got split across multiple lifecycle methods.

---

2️⃣ Code duplication

Same logic copied between components → hard to maintain.

---

3️⃣ this keyword confusion

this.handleClick = this.handleClick.bind(this);

Frequent source of bugs.

---

4️⃣ Hard to reuse stateful logic

HOCs and render props made code:

• deeply nested
• hard to read

---

✅ What Hooks Solve

✔ Use state in functional components
✔ Reuse logic cleanly
✔ No this keyword
✔ Cleaner, more readable code
✔ Easier testing and maintenance

---

🔑 Core React Hooks (With Examples)

---

1️⃣ useState — Manage State

Allows functional components to have state.

import { useState } from "react";

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

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

✔ Replaces this.state and this.setState

---

2️⃣ useEffect — Handle Side Effects

Used for:

• API calls
• subscriptions
• timers
• DOM updates

import { useEffect } from "react";

useEffect(() => {
  console.log("Component mounted");

  return () => {
    console.log("Cleanup on unmount");
  };
}, []);

✔ Replaces:

• componentDidMount
• componentDidUpdate
• componentWillUnmount

---

3️⃣ useContext — Access Context Easily

Avoids prop drilling.

const ThemeContext = createContext();

function Child() {
  const theme = useContext(ThemeContext);
  return <p>{theme}</p>;
}

---

4️⃣ useRef — Persist Values Without Re-render

const inputRef = useRef(null);

inputRef.current.focus();

✔ Access DOM
✔ Store mutable values

---

5️⃣ useMemo — Optimize Expensive Calculations

const sortedData = useMemo(() => {
  return data.sort();
}, [data]);

✔ Prevents unnecessary recalculations

---

6️⃣ useCallback — Memoize Functions

const handleClick = useCallback(() => {
  console.log("Clicked");
}, []);

✔ Prevents unnecessary child re-renders

---

⭐ Custom Hooks — Biggest Power of Hooks

Custom Hooks allow reusing logic.

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

  useEffect(() => {
    fetch(url).then(res => res.json()).then(setData);
  }, [url]);

  return data;
}

Usage:

const users = useFetch("/api/users");

✔ Clean
✔ Reusable
✔ No duplicated logic

---

📜 Rules of Hooks (Very Important)

1️⃣ Hooks must start with use
2️⃣ Call hooks only at the top level
3️⃣ Call hooks only inside:

• functional components
• custom hooks

❌ No hooks in loops, conditions, or nested functions.

---

🔥 Hooks vs Class Components (Quick Comparison)

Class Components	Hooks
Complex lifecycle	Simple effects
this keyword	No this
Hard to reuse logic	Custom hooks
Verbose	Clean & concise

---

🎯 Short Interview Answer

React Hooks are functions that allow functional components to use state, lifecycle methods, and other React features.
They were introduced to solve problems with class components like complex lifecycle logic, code duplication, and this binding issues.
Hooks make code cleaner, reusable, and easier to maintain.

---

⭐ One-Line Summary

Hooks let you write powerful, stateful React components without classes.