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