What are React Hooks?

React Hooks are special functions that let you “hook into” React features like state and lifecycle methods in functional components. Introduced in React 16.8, Hooks revolutionized the way developers write React applications by making functional components stateful and feature-rich without converting them to class components.

Introduction to Hooks

Traditionally, state and lifecycle features were only available in class components. Functional components were limited to being stateless and simple.

Hooks changed that. Now you can:

• Use state in functional components with useState
• Perform side effects like fetching data with useEffect
• Reuse logic across components with custom hooks
• Access context values easily using useContext

Hooks are functions that always start with use (e.g., useState, useEffect) and allow you to manage React features cleanly and efficiently.

Benefits of Using Hooks

Using Hooks in React has many advantages:

1. Simpler and Cleaner Code

Hooks allow you to use state and other React features without writing a class. This results in less boilerplate and more readable code.

import React, { useState } from "react";

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

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

2. Reusability with Custom Hooks

Hooks let you extract logic into reusable functions called custom hooks.

Example: a hook to track window width:

import { useState, useEffect } from "react";

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener("resize", handleResize);

    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return width;
}

3. Better Code Organization

Hooks help group related logic together, unlike class components where lifecycle methods can scatter code.

Example: Fetching API data with useEffect:

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

4. Functional Components Are More Powerful

Hooks allow functional components to do everything class components can, including:

• Managing state (useState, useReducer)
• Handling side effects (useEffect)
• Accessing DOM elements (useRef)
• Sharing logic (custom hooks)
• Using context (useContext)

5. Improved Performance

Hooks encourage splitting logic into small, reusable units, reducing unnecessary re-renders and improving maintainability.

• useMemo and useCallback optimize expensive calculations and function references
• State management is more granular, leading to efficient rendering

Rules of Hooks

1. Only call Hooks at the top level – don’t use inside loops, conditions, or nested functions.
2. Only call Hooks from React functions – either functional components or custom hooks.
3. Always use use prefix – ensures React recognizes it as a hook.

Following these rules guarantees predictable and bug-free behavior.

Popular Built-in Hooks