React Hooks Introduction

Introduction

For the first several years of React's life, if you wanted a component to hold state or run code in response to being mounted, updated, or unmounted, you had to write it as a class component, using this.state, this.setState, and lifecycle methods like componentDidMount. This worked, but classes brought real friction: confusing this bindings, logic scattered across multiple lifecycle methods, and stateful logic that was hard to reuse between components.

In React 16.8 (released in 2019), the React team introduced Hooks — plain functions that let function components "hook into" React features like state and lifecycle behavior, without ever writing a class. Hooks quickly became the standard, recommended way to write React, and nearly all modern React code you will encounter uses them. This lesson introduces what Hooks are, why they exist, and the strict rules that keep them working correctly.

What Are Hooks?

A Hook is simply a function — one that gives a function component access to React features that used to require a class. useState lets a function component hold state. useEffect lets it run side effects. useRef lets it hold a mutable value across renders. Every Hook name starts with "use", which is both a naming convention and a signal to React and to linting tools that a function follows the special Rules of Hooks.

import { useState } from 'react';

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

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

Before Hooks existed, the exact same behavior required a class component with a constructor, this.state, and this.setState. Hooks let you achieve it with a single line inside a plain function.

Why Hooks Were Introduced

Class components were not broken, but they came with several persistent pain points that the React team set out to solve with Hooks.

The Rules of Hooks

Hooks look like normal function calls, but React relies on them being called in the exact same order on every single render, so it can correctly match each Hook call to its corresponding internal state. This is why Hooks come with two strict rules that you must always follow.

function Profile({ isLoggedIn }) {
  // ❌ Hook called conditionally — breaks the call order
  if (isLoggedIn) {
    const [name, setName] = useState("");
  }

  // ❌ Hook called inside a loop
  for (let i = 0; i < 3; i++) {
    const [item, setItem] = useState(null);
  }

  return <div>...</div>;
}

function Profile({ isLoggedIn }) {
  // ✅ Always called, in the same order, every render
  const [name, setName] = useState("");

  // The condition goes inside the logic, not around the Hook call
  if (isLoggedIn) {
    console.log(`Welcome, ${name}`);
  }

  return <div>{isLoggedIn ? name : "Guest"}</div>;
}

Why the Rules Matter

React does not track Hooks by name — it tracks them by call order. Internally, each component keeps an ordered list of Hook "slots," and every render, React walks through that list matching the first useState call to the first slot, the second call to the second slot, and so on. If a Hook is skipped conditionally on some renders but not others, that ordering breaks, and React can attach the wrong state to the wrong Hook — or throw an error outright.

Render 1: useState() -> slot 1,  useState() -> slot 2
Render 2 (if skipped):  useState() -> slot 1  (only one call!)

React expected 2 Hook calls but found 1 —
state becomes mismatched or React throws:
"Rendered fewer hooks than expected."

A Preview of Built-In Hooks

React ships with a set of built-in Hooks covering the most common needs — state, side effects, references, performance, and more. The next several lessons walk through each of these in depth.

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

Hooks transformed how React components are written, replacing verbose class-based patterns with simple functions that plug directly into React's internals. The two Rules of Hooks — top-level calls only, and calls only from components or custom Hooks — exist to protect the consistent call order React depends on to track state correctly.

With this foundation in place, you are ready to start learning the built-in Hooks one at a time, beginning with the one you will use constantly: useState.