What are React Hooks, and why were they introduced in React?

Updated Feb 20, 2026

Short answer

Hooks are functions that let React function components use features like state, side effects, and context without writing class components. They were introduced to make component logic more reusable, simpler to organize, and easier to share.

Deep explanation

React Hooks were introduced in React 16.8 to solve problems that appeared when applications grew larger with class-based components. Before Hooks, developers often used classes to manage state and lifecycle behavior. This worked, but it created patterns that could become difficult to maintain.

Hooks allow function components to use React features that were previously available mainly to class components.

Why React introduced Hooks

Class components had several challenges:

Logic related to one feature was often spread across lifecycle methods like componentDidMount and componentDidUpdate.
Reusing stateful logic between components usually required patterns like higher-order components or render props.
Classes introduced extra complexity around this binding and method handling.

Hooks provide a way to keep related logic together inside a function component.

How Hooks work

A Hook is a special React function whose name starts with use, such as:

useState for storing component state.
useEffect for running side effects after rendering.
useContext for reading shared context values.
useMemo and useCallback for optimization scenarios.

For example, useState gives a function component a state value and a function to update it:

Counter.tsx

TSX

1import { useState } from "react";
2
3function Counter() {
4  const [count, setCount] = useState(0);
5
6  return (
7    <button onClick={() => setCount(count + 1)}>
8      Clicks: {count}
9    </button>
10  );
11}

When setCount runs, React schedules a new render with the updated state.

Hook rules

Hooks have rules because React tracks Hook calls internally by their order.

Hooks must be called at the top level of React function components or custom Hooks.

Do not call Hooks:

Inside loops.
Inside conditions.
Inside nested functions.

A component should call Hooks in the same order on every render.

Component logic flow

The relationship between rendering and Hooks can be visualized like this:

Rendering diagram…

Custom Hooks and reuse

One major benefit of Hooks is creating custom Hooks. A custom Hook is a reusable function that combines built-in Hooks and shares behavior between components.

For example, an application might create useAuth to manage login state, user information, and authentication checks in multiple components.

Approach	Strength	Trade-off
Class components	Familiar lifecycle methods	Logic can become scattered
Function components with Hooks	Reusable and focused logic	Requires understanding Hook rules
Custom Hooks	Shares behavior cleanly	Needs careful API design

⚠️ Hooks organize reusable behavior; they do not replace good component design.

Real-world example

Imagine a dashboard that shows the current user's profile. Multiple pages need to know whether a user is logged in. Instead of repeating authentication logic, a team can create a custom Hook.

use-auth.ts

TSX

1import { useState } from "react";
2
3function useAuth() {
4  const [user, setUser] = useState(null);
5
6  return {
7    user,
8    login: setUser,
9  };
10}

A component can then call useAuth and focus only on displaying information. The component describes what it needs, while the Hook contains the reusable behavior.

Common mistakes

* **Conditional Hooks** - Calling Hooks inside `if` statements can break React's Hook ordering. Always call Hooks consistently.
* **Wrong dependency arrays** - Ignoring `useEffect` dependencies can create stale data or unnecessary renders. Define dependencies carefully.
* **Overusing effects** - Using `useEffect` for calculations or simple state changes adds complexity. Prefer direct computation when possible.
* **Confusing state with variables** - Normal variables reset on every render. Use `useState` when data must persist between renders.

Follow-up questions

Why can Hooks only be called at the top level?
What is the difference between useState and normal variables?
When should you use useEffect?
What are custom Hooks?