Stop 08 · ReactTopics · 6/20

Hooks

In short

useState, useEffect, useRef and friends are hooks: special functions that let a plain function component remember things and respond to changes. They come with two strict rules.

Functions (`useState`, `useEffect`, `useContext`, etc.) that let function components use state, side effects and other React features without writing a class.

The jaadu mascot as a warden takes roll call along a neat row of hostel beds.

Think of it like this

Hostel roll call

The warden takes attendance by position: first bed, second bed, third bed. If someone sleeps in a different bed one night, the whole register goes wrong. React remembers hooks by their order too, so that order must never change between renders.

Watch it happen

React reads hooks by position

name

open

effect

1/5Render 1: this component calls three hooks. React stores their data in slots 0, 1 and 2.

The big ideas

What you need to know

Rule 1: top level only

Don't call hooks inside if blocks, loops or nested functions. Same hooks, same order, every render.

Rule 2: only in React functions

Call hooks from components or from your own custom hooks, never from normal helper functions.

The everyday set

useState for values, useEffect for side work, useRef for DOM nodes and silent values, useContext for shared data.

React 19 adds more

use reads a promise or context, useActionState handles form actions, and useOptimistic shows instant updates.

See it in code

Walk through the code

tsx

1import { useState } from "react";2 3// Bad: the early return means useState sometimes doesn't run4function Profile({ user }: { user?: { name: string } }) {5  if (!user) return <p>Log in first</p>;6  const [open, setOpen] = useState(false);7  return <button onClick={() => setOpen(!open)}>{user.name}</button>;8}9 10// Good: hooks first, conditions after11function ProfileFixed({ user }: { user?: { name: string } }) {12  const [open, setOpen] = useState(false);13  if (!user) return <p>Log in first</p>;14  return <button onClick={() => setOpen(!open)}>{user.name}</button>;15}

1/3Bad: with no user, the function returns before useState ever runs.

In the first version, logging in changes how many hooks run, and React throws an error. Keep every hook above any early return.

Save yourself the pain

Common mistakes

Oops

Calling useState inside an if or a for loop.

Do this instead

Move hooks to the top of the component. Put the condition inside the hook's logic or in the JSX.

Oops

Ignoring the eslint-plugin-react-hooks warnings.

Do this instead

Keep that ESLint plugin switched on. It catches broken hook rules and missing effect dependencies before you do.

Your mission

Break the rules on purpose

~10 min

Quick check

Why can't you call useState inside an if block?

Go deeper

1Learn the 'Rules of Hooks' — only call at the top level, only from React functions.
2Work through `useState`, `useEffect`, `useRef` and `useContext` one at a time.
3Read why hooks were introduced — sharing stateful logic between components was painful before.