#156 What are hooks in React?

• Hooks are special functions in React that allow you to use state and other React features in functional components.
• Before hooks, these features were only available in class components.
• Hooks make functional components more powerful, reusable, and cleaner.

---

🔹 Why Hooks?

• Avoids writing class components (simpler syntax).
• Makes stateful logic reusable (through custom hooks).
• Provides a way to use lifecycle methods in functional components.

---

🔹 Commonly Used Built-in Hooks

• useState → For managing component state

import React, { useState } from "react";

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

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

---

• useEffect → For side effects (API calls, subscriptions, timers)

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

function Users() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
      .then(data => setUsers(data));
  }, []); // runs only once

  return <ul>{users.map(user => <li key={user.id}>{user.name}</li>)}</ul>;
}

---

• useContext → To consume values from Context API (avoid prop drilling).

   

• useReducer → For more complex state management (like Redux lite).

   

• useRef → For referencing DOM elements or storing mutable values that don’t trigger re-renders.

   

• useMemo → For memoizing (caching) expensive calculations.

 

• useCallback → For memoizing functions (to prevent unnecessary re-creations).

   

• useLayoutEffect → Like useEffect, but runs synchronously before paint (used rarely).

---

🔹 Custom Hooks

• You can also create your own hooks to reuse logic.
• Example: A custom useFetch hook.

import { useState, useEffect } from "react";

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

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

  return data;
}

// Usage
function App() {
  const users = useFetch("https://jsonplaceholder.typicode.com/users");

  return (
    <div>
      {users ? users.map(u => <p key={u.id}>{u.name}</p>) : "Loading..."}
    </div>
  );
}

---

✅ Short Interview Answer

“Hooks are special functions introduced in React 16.8 that let us use state and lifecycle features inside functional components. Common hooks are useState, useEffect, useContext, and useReducer. They make code cleaner, reusable, and remove the need for class components.”