Lesson 19 — Rules of Hooks Explained

by

Introduction 😊

So far, you have learned:

  • What hooks are
  • useState, useEffect, useContext
  • Custom hooks

Now comes a very important lesson 🚨

React Hooks follow strict rules.
If you break these rules, your app may:

  • Throw errors ❌
  • Behave unpredictably ❌
  • Become hard to debug ❌

In this lesson, you will learn:

  • What the Rules of Hooks are
  • Why these rules exist
  • Correct and incorrect examples
  • Common beginner mistakes

Let’s begin 🚀

What Are the Rules of Hooks? 🤔

The Rules of Hooks are guidelines defined by React that ensure hooks work correctly.

👉 In simple words:

Hooks must be used in a very specific way.

There are two main rules you must always remember.

Rule 1️⃣: Call Hooks Only at the Top Level 📌

❌ Do NOT call hooks:

  • Inside loops
  • Inside conditions
  • Inside nested functions

❌ Incorrect Example

if (isLoggedIn) {
  const [user, setUser] = useState(null);
}

✅ Correct Example

const [user, setUser] = useState(null);

if (isLoggedIn) {
  // logic here
}

👉 Hooks must be called in the same order on every render.

Why This Rule Exists 🧠

React relies on the order of hooks to keep track of state.

If hooks are called conditionally, React:

  • Loses track of state
  • Assigns wrong values
  • Breaks the app

👉 This is why hook order must never change.

Rule 2️⃣: Call Hooks Only from React Functions ⚛️

Hooks can be used only in:

  • React function components
  • Custom hooks

❌ Do NOT use hooks in:

  • Class components
  • Regular JavaScript functions
  • Event handlers directly

❌ Incorrect Example

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

✅ Correct Example

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

Using Hooks Inside Custom Hooks ♻️

Hooks can safely be used inside custom hooks.

Example:

function useAuth() {
  const [user, setUser] = useState(null);
  return user;
}

👉 Custom hooks follow the same rules.

React ESLint Plugin for Hooks 🧩

React provides an ESLint plugin that:

  • Warns when rules are broken
  • Helps beginners avoid mistakes

Plugin name:

eslint-plugin-react-hooks

👉 Most modern React setups already include it.

Common Hook Rule Violations ❌

  • Using hooks inside if statements
  • Calling hooks inside loops
  • Using hooks inside event handlers
  • Forgetting hooks must start with use

💡 If something feels wrong, check the rules first.

Hooks Naming Convention 📛

Custom hooks must start with use.

❌ Incorrect:

fetchData()

✅ Correct:

useFetchData()

👉 This helps React and ESLint detect hooks properly.

Rules of Hooks Summary 📝

✔ Call hooks at the top level
✔ Call hooks only from React functions
✔ Never call hooks conditionally
✔ Follow naming conventions

Conclusion 🎯

The Rules of Hooks are not optional — they are mandatory.

Key takeaways:

  • Hooks depend on call order
  • Breaking rules causes bugs
  • Follow rules for predictable behavior
  • ESLint helps enforce rules

👉 If you respect the rules of hooks, your React apps will be stable and reliable 💙

Frequently Asked Questions (FAQs) ❓

Can I call hooks inside loops?

No. Hooks must be called at the top level.

Can I call hooks inside class components?

No. Hooks work only with function components.

Why must custom hooks start with use?

So React can identify and validate them.

What’s Next? 🚀

👉 In the next lesson, we will learn:

Lesson 20 — React Router Introduction
Setting up routing and navigation in React applications.

Leave a Comment