React Hooks — Rules, Simple Explanation & Practical Examples

🧩 Why these rules matter (short)

React tracks Hook state by the order Hooks are called during rendering. If the order changes between renders (because of a condition, loop, or early return), React can’t reliably match state to the right Hook call — leading to bugs like "Rendered more hooks than during the previous render". The two rules below prevent that confusion.

1) Rule — Only call Hooks at the top level

What it means (simple): call Hooks directly inside the component body — not inside if, loops (for, while), or nested/helper functions.

Why this is important

React relies on the order of Hook calls to map state and effects to the correct component instance. If a Hook is called only sometimes (conditional) or multiple times (inside loops), the ordering changes and React breaks.

Wrong — conditionally calling a Hook

function MyComponent({ show }) {
  if (show) {
    const [count, setCount] = useState(0); // ❌ called conditionally
  }
  // ...
}

Right — call Hook unconditionally, use state conditionally

function MyComponent({ show }) {
  const [count, setCount] = useState(0);   // ✅ always called
  if (!show) return null;
  return Count: {count};
}

Tip: If you need a different number of "things" with Hooks (e.g., per-item state), keep Hooks at top-level and store arrays/objects in state, or move per-item logic into a child component so each child can use Hooks safely.

2) Rule — Only call Hooks from React functions

What it means: Hooks must be called from either:

React function components (function Foo() { ... })
Custom Hooks — plain functions whose name starts with use and that internally call Hooks

Wrong — calling a Hook from a plain helper

// helper.js
export function helper() {
  useState(0); // ❌ not a component or a custom hook
}

Right — create a custom Hook and use it inside a component

// useCounter.js
export function useCounter(initial = 0) {
  const [count, setCount] = useState(initial);
  const increment = () => setCount(c => c + 1);
  return { count, increment };
}

// MyComponent.jsx
function MyComponent() {
  const { count, increment } = useCounter(0); // ✅
  return Clicked {count} times;
}

Naming convention matters: custom hooks must start with use so React tools and the ESLint plugin can detect them. This helps avoid accidental misuse.

3) Useful rules & best practices (practical)

useEffect dependencies: include every variable used by the effect in the dependency array, or intentionally omit with a clear comment. Use the linter rule react-hooks/exhaustive-deps to help. Example:

useEffect(() => {
  doSomething(userId);
}, [userId]); // include userId

Cleanup effects: return a cleanup function from useEffect when you create subscriptions, timers, or other side-effects to avoid leaks.

useEffect(() => {
  const id = setInterval(() => setTick(t => t + 1), 1000);
  return () => clearInterval(id);
}, []);

useRef: store mutable values that shouldn't cause re-renders (DOM refs, previous values, timers) in ref.current.

useMemo / useCallback: memoize expensive results or function identities when necessary — but avoid premature optimization. Only add them when you have a measurable performance reason.

Lazy state initialization: if initial state is expensive, pass a function to useState:

const [value, setValue] = useState(() => computeExpensiveDefault());

Split concerns: prefer multiple small Hooks (multiple useEffect calls) rather than one big effect that does unrelated things.

4) Common errors you’ll see & how to fix them

Error Cause Fix Rendered more hooks than during the previous render A Hook is called conditionally or inside a loop Move the Hook to the top level of the component or into a child component. Hooks can only be called inside the body of a function component Hook used in a non-component or non-use* function Turn that helper into a custom Hook (start its name with use) or call the Hook from a component. Missing dependency warning in useEffect Effect reads a variable but it’s not in dependency array Add the dependency, or memoize the value with useMemo/useCallback, or restructure logic with a clear comment explaining deliberate omission.

5) Quick cheat-sheet — which Hook when?

useState — local component state (form inputs, toggles).
useEffect — side effects (fetching, subscriptions, timers).
useRef — mutable container that persists across renders (DOM refs, timers).
useMemo — memoize expensive computed values.
useCallback — memoize callback functions to avoid unnecessary child renders.
useReducer — complex state transitions or many related state fields.
Custom Hooks (useSomething) — extract and reuse Hook logic across components.

6) Small complete example — custom Hook + top-level usage

This example follows both rules: the custom Hook is named with use, it uses Hooks internally and is always called at top level inside the component.

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

function useWindowWidth() {
  const [width, setWidth] = useState(() => window.innerWidth); // lazy init
  useEffect(() => {
    const onResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []); // effect set up once
  return width;
}

export default function MyComponent() {
  const width = useWindowWidth(); // ✅ hook called at top level
  return Window width: {width}px;
}

7) Advanced patterns & tips (short)

Conditional behavior, not conditional hooks: call a Hook always, but change what it does based on a value:

const data = useDataFetcher(url); // always call
if (!data) return ;
return ;

List state per-item: instead of looping to call Hooks, map data to child components and let each child use Hooks normally:

items.map(item => )
// Item component can safely use Hooks

Testing Hooks: Hooks are plain functions (custom hooks are testable). Use React Testing Library + renderHook from @testing-library/react-hooks or React's utilities to test Hook behavior.

📈 SEO-friendly Title & Short Description (for meta)

Title: React Hooks Rules — Simple Guide with Examples (Top-Level Calls & Custom Hooks)

Meta Description: Learn the two essential React Hooks rules: call Hooks only at the top level and only from React function components or custom Hooks. Includes clear examples, common errors, and a cheat-sheet for useState, useEffect, useRef, useMemo, and custom Hooks.

🔑 Suggested SEO keywords

react hooks rules, call hooks at top level, custom hooks naming, useEffect dependencies, react hooks best practices, react hooks examples, useState vs useEffect, common hook errors

🧾 Conclusion — keep it simple

The two Hook rules are intentionally tiny but powerful: keep Hooks predictable by calling them in the same order (top level) and from the right places (function components or custom Hooks). Follow the dependency and cleanup patterns for useEffect, prefer small focused Hooks, and favor clarity over micro-optimizations. Once you internalize these rules, Hooks become a flexible, ergonomic way to compose component logic.

📚 Read next

React Hooks Rules Explained