🔍 What Are React Hooks?

React Hooks are functions that let you “hook into” React features like state, lifecycle, context, refs, and performance optimizations—directly inside functional components. They remove the need for class components while keeping all powerful React capabilities.

📅 Introduced In

React v16.8, with the goal of improving readability, reusability, and simplifying component logic.

🎯 Why React Hooks Were Introduced

Before Hooks, React had two component types. Functional components were mainly for UI and couldn’t manage state or side effects, while class components were required for state, lifecycle methods, and complex logic. This split led to duplicated logic, harder refactoring, and less reusable code. Hooks unified everything by bringing state and lifecycle features to functional components, making code more concise, easier to test, and highly reusable through custom hooks.

🔧 Common React Hooks Explained with Examples

1️⃣ useState

Purpose: Manage local state in functional components.
Use Cases: Form inputs, toggle buttons, counters, theme switches.

import React, { useState } from "react";

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

  return (
    <>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click Me</button>
    </>
  );
}

2️⃣ useEffect

Purpose: Handle side effects like API calls, subscriptions, timers, or DOM updates.
Replaces: componentDidMount, componentDidUpdate, componentWillUnmount.

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

function DataFetcher() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch("https://api.example.com/data")
      .then(res => res.json())
      .then(setData);
  }, []); // runs once after mount

  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

3️⃣ useContext

Purpose: Access shared global data without prop drilling.
Use Cases: Theme, authentication, language settings.

import React, { useContext } from "react";

const ThemeContext = React.createContext("light");

function ThemedComponent() {
  const theme = useContext(ThemeContext);
  return <p>The current theme is {theme}</p>;
}

4️⃣ useRef

Purpose: Reference DOM elements or store mutable values without re-rendering.
Use Cases: Focusing inputs, timers, previous values.

import React, { useRef } from "react";

function InputFocus() {
  const inputRef = useRef(null);

  return (
    <>
      <input ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>
        Focus Input
      </button>
    </>
  );
}

5️⃣ useReducer

Purpose: Manage complex state logic with multiple actions.
Use Cases: Forms, nested state objects, Redux-like patterns.

import React, { useReducer } from "react";

function reducer(state, action) {
  switch (action.type) {
    case "increment": return { count: state.count + 1 };
    case "decrement": return { count: state.count - 1 };
    default: return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
    </>
  );
}

6️⃣ useCallback

Purpose: Memoize functions to prevent unnecessary re-renders.

import { useCallback } from "react";

const memoizedCallback = useCallback(() => {
  console.log("I only change if dependencies change");
}, [dependency]);

Use Cases: Passing callbacks to React.memo components.

7️⃣ useMemo

Purpose: Memoize the result of expensive calculations.

import { useMemo } from "react";

const filteredItems = useMemo(() => {
  return items.filter(item => item.active);
}, [items]);

Use Cases: Filtering lists, heavy computations.

8️⃣ useLayoutEffect

Purpose: Run logic synchronously after DOM updates but before paint.

import { useLayoutEffect, useRef } from "react";

useLayoutEffect(() => {
  const height = elementRef.current.offsetHeight;
}, []);

Use Cases: Measuring layout, animations, fixing UI flickers.

9️⃣ useImperativeHandle

Purpose: Expose limited methods to parent components via refs.

import React, { forwardRef, useImperativeHandle, useRef } from "react";

const Input = forwardRef((props, ref) => {
  const inputRef = useRef();

  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current.focus()
  }));

  return <input ref={inputRef} />;
});

Use Cases: Controlled access to child component behavior.

🔟 useId

Purpose: Generate unique IDs (SSR-safe, accessibility-friendly).

import { useId } from "react";

function FormField() {
  const id = useId();
  return (
    <>
      <label htmlFor={id}>Name</label>
      <input id={id} />
    </>
  );
}

Use Cases: Accessibility labels, server-side rendering.

🧠 Final Thoughts

React Hooks transformed how we build React apps. They enable cleaner logic, better reuse through custom hooks, and remove the need for class components. Whether you’re managing state, handling side effects, optimizing performance, or working with the DOM, Hooks make modern React development intuitive, powerful, and scalable.