Rules of Hooks

📜 Introduction

React Hooks follow a small set of important rules that ensure they work correctly. React identifies each Hook by the order in which it is called during rendering. Following these rules allows React to preserve state and execute effects consistently across every render.

Important

Breaking the Rules of Hooks can lead to unexpected behavior because React relies on the order of Hook calls to associate Hook data with the correct component.

🎯 The Two Rules of Hooks

  1. Only call Hooks at the top level of a React function component or a custom Hook.
  2. Only call Hooks from React function components or custom Hooks.

📌 Rule 1: Call Hooks at the Top Level

Always call Hooks at the top level of your component before any conditions, loops, or nested functions. This guarantees that Hooks execute in the same order during every render.

✅ Correct Example

Hooks Called at the Top Level

import { useState } from "react";

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

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

❌ Incorrect Example

Hook Inside a Condition

import { useState } from "react";

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

  return <h1>Hello</h1>;
}

Warning

Calling a Hook inside an if statement changes the order of Hook calls between renders, which can cause React to associate state with the wrong Hook.

📌 Rule 2: Only Call Hooks from React Functions

Hooks can only be used inside React function components or custom Hooks. They should never be called from regular JavaScript functions.

✅ Correct Example

Hook Inside a Function Component

import { useState } from "react";

function Profile() {
  const [name] = useState("Alice");

  return <h1>{name}</h1>;
}

❌ Incorrect Example

Hook Inside a Regular Function

import { useState } from "react";

function getName() {
  const [name] = useState("Alice");
  return name;
}

Warning

Regular JavaScript functions are not managed by React's rendering system, so Hooks cannot be used inside them.

🔄 Why These Rules Exist

Component Renders
React Executes Hooks
Hook Order Remains the Same
Component Updates Successfully
React Matches Stored State
React Executes Effects Correctly

📊 Correct vs Incorrect Usage

PracticeAllowed?Reason
Hook at the top level✅ YesMaintains consistent Hook order.
Hook inside an if statement❌ NoChanges Hook order between renders.
Hook inside a loop❌ NoMay execute a different number of times.
Hook inside a nested function❌ NoReact cannot reliably track execution order.
Hook inside a custom Hook✅ YesCustom Hooks follow the same rules as components.

🧩 Custom Hooks Follow the Same Rules

A custom Hook is simply a JavaScript function whose name starts with use. Since custom Hooks are executed by React, they can call other Hooks as long as they follow the same Rules of Hooks.

Custom Hook Example

import { useState } from "react";

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

  return { count, setCount };
}

📋 Common Mistakes

Do not call Hooks inside conditions, loops, nested functions, event handlers, or regular JavaScript functions.

Always place Hooks at the top level of React function components or custom Hooks so React can preserve their execution order.

✅ Best Practices

  • Call Hooks before any conditional logic.
  • Keep all Hook calls together near the top of the component.
  • Create custom Hooks to reuse stateful logic.
  • Use descriptive names for custom Hooks, starting with use.
  • Follow the same Hook order during every render.

📚 Official Documentation

For more information about the Rules of Hooks, visit the official React documentation at Rules of React.

Summary

The Rules of Hooks ensure that React can correctly track state and effects across renders. By always calling Hooks at the top level and only from React function components or custom Hooks, you can build reliable and predictable React applications.