What is a Hook ?

React Hooks

Hooks are special functions in React that allow you to use important features such as:

• State

• Lifecycle methods

• Context

• Refs

You can use all these features without using class components.

In simple words, Hooks allow you to use React features inside functional components.

Why Hooks are used

Before Hooks:

• Developers used class components to manage state and lifecycle

After Hooks:

• Everything can be done using functional components

• Code becomes cleaner

• Code becomes shorter

• Logic can be reused easily

Definition

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

Example of useState Hook

javascript

import { useState } from 'react';
import { createRoot } from 'react-dom/client';

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return (
    <>
      <h1>My favorite color is {color}</h1>

      <button onClick={() => setColor("blue")}>Blue</button>
      <button onClick={() => setColor("red")}>Red</button>
      <button onClick={() => setColor("pink")}>Pink</button>
      <button onClick={() => setColor("green")}>Green</button>
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <FavoriteColor />
);

Understanding the Code

javascript

const [color, setColor] = useState("red");

• color is the current state value

• setColor is the function used to update the state

• red is the initial value

When setColor is called:

• The state is updated

• The component re-renders automatically

What is State

State is data that can change over time.

Examples:

• User input

• Button clicks

• API data

• UI updates

Rules of Hooks

React Hooks follow some important rules.

1. Use only in Functional Components

Hooks cannot be used in class components.

They can only be used inside function components.

2. Always call at Top Level

Do not use Hooks inside loops, conditions, or nested functions.

Always call them at the top of the component.

Wrong example:

javascript

if (true) {
  useState();
}

Correct example:

javascript

const [data, setData] = useState();

3. Do not use conditionally

Do not call Hooks inside if or for statements.

Hooks must be called in the same order every time the component renders.

Common Built-in Hooks

• useState
  Used to manage state

• useEffect
  Used to handle side effects such as API calls and lifecycle behavior

• useContext
  Used to access global data

• useRef
  Used to access DOM elements or store values

• useMemo
  Used to improve performance

• useCallback
  Used to optimize functions

Custom Hooks

You can create your own Hooks to reuse logic in multiple components.

Example:

javascript

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

  const increment = () => setCount(count + 1);

  return { count, increment };
}

Using the custom Hook:

javascript

const { count, increment } = useCounter();

Advantages of Hooks

• No need to use class components

• Code is clean and easy to read

• Logic can be reused

• Better code structure

• Easy to test

Interview Question

Why are Hooks better than class components

Answer:

• Less code and less complexity

• No need to use this keyword

• Easy to reuse logic using custom Hooks

• Better separation of logic and UI