Rules of React Hooks0%
The useEffect Hook for Side Effects

Rules of React Hooks

Beginner12 min read•Updated: Jul 11, 2026
Study MaterialsCheatsheet

Rules of React Hooks

1. What Are React Hooks?

Introduced in React 16.8, Hooks are functions that let you "hook into" React state and lifecycle features from functional components. Examples include useState, useEffect, useContext, useRef, and useMemo.

Because React relies on the internal execution order of functions to track hook state behind the scenes, you must adhere strictly to The Two Rules of Hooks.

Output
React's Internal Fiber Node:
[Hook 1: useState(0)] ──> [Hook 2: useEffect(...)] ──> [Hook 3: useState('')]
(Hooks are stored as a singly linked list; order MUST NEVER CHANGE between renders!)

2. Rule 1: Only Call Hooks at the Top Level

Do NOT call Hooks inside loops, conditions, nested functions, or try/catch blocks.

Always call Hooks at the very top level of your React function, before any early returns:

JSX
// ❌ FORBIDDEN: Calling hook inside a condition!
function UserProfile({ userId }) {
if (userId) {
const [user, setUser] = useState(null); // Violates Rule 1!
}
// ...
}
 
// ❌ FORBIDDEN: Calling hook inside a loop!
function FeatureMatrix({ features }) {
for (let i = 0; i < features.length; i++) {
useEffect(() => {}); // Violates Rule 1!
}
// ...
}
 
// ✅ CORRECT: Always call at the top level
function UserProfile({ userId }) {
const [user, setUser] = useState(null);
 
useEffect(() => {
// Put conditions INSIDE the hook, not around it!
if (userId) {
// Fetch user data...
}
}, [userId]);
 
if (!userId) return <p>Please select a user.</p>;
 
return <div>{user?.name}</div>;
}

Why does this rule exist?

React does not track hooks by name or ID. Instead, React maintains an internal array / linked list of hook cells for each component instance. On every render, React matches each hook call with the next cell in the list. If a hook is skipped inside an if block, every subsequent hook shifts out of position, permanently corrupting the component's state!

3. Rule 2: Only Call Hooks from React Functions

Do NOT call Hooks from regular JavaScript functions.

You must only call Hooks from:

  1. 1
    React Functional Components: Functions that return JSX and start with an uppercase letter.
  2. 2
    Custom Hooks: Functions whose names start with use (e.g., useFetch, useAuth, useLocalStorage).
JSX
// ❌ FORBIDDEN: Calling hook from a plain helper function
function calculateDiscount(price) {
const [discount, setDiscount] = useState(0.1); // Violates Rule 2!
return price * (1 - discount);
}
 
// ✅ CORRECT: Calling hook inside a Custom Hook
function useDiscount(price) {
const [discount, setDiscount] = useState(0.1);
return price * (1 - discount);
}

4. The ESLint Plugin for Hooks

React provides an official ESLint plugin: eslint-plugin-react-hooks.

It includes two essential linting rules:

  • react-hooks/rules-of-hooks: Enforces the two core rules automatically in your IDE and build step.
  • react-hooks/exhaustive-deps: Verifies that all reactive dependencies are included in useEffect and useCallback dependency arrays.
Interactive Quiz

Practice Quiz

Question 1
Why must React Hooks only be called at the top level of a component?
Question 2
From which locations are you allowed to invoke a React Hook?
Question 3
What should you do if you only want an effect to run when a certain condition is met?
Question 4
What prefix must all custom React hooks begin with to adhere to the Rules of Hooks?
Question 5
What happens if a component places a useState hook after an early if (error) return null;?
Next Lesson

The useEffect Hook for Side Effects

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Managing Loading, Error, and Empty StatesThe useEffect Hook for Side Effects

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext