Rules of Hooks in React: How to Use Hooks Correctly

In React, hooks must be called only at the top level of a functional component or a custom hook, never inside loops, conditions, or nested functions. This ensures React can track hook calls consistently across renders.

Syntax

Hooks are special functions starting with use that let you use React features like state and lifecycle inside functional components.

Common hooks include useState, useEffect, and useContext.

Hooks must be called directly inside the component function or a custom hook, not inside loops or conditions.

jsx

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

function MyComponent() {
  const [count, setCount] = useState(0); // useState hook

  useEffect(() => { // useEffect hook
    document.title = `Count: ${count}`;
  }, [count]);

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

Example

This example shows a simple counter using useState and useEffect. The count updates on button click, and the page title changes accordingly.

jsx

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

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Output

You clicked 0 times (initially)
Button labeled 'Click me' increments count and updates text and page title

Common Pitfalls

Common mistakes include calling hooks inside loops, conditions, or nested functions, which breaks React's hook call order and causes errors.

Always call hooks at the top level of your component or custom hook.

jsx

import React, { useState } from 'react';

// Wrong: Hook inside condition
function WrongComponent({ show }) {
  if (show) {
    // ❌ This breaks rules of hooks
    const [count, setCount] = useState(0);
  }
  return <div>Check console for errors</div>;
}

// Right: Hook at top level
function RightComponent({ show }) {
  const [count, setCount] = useState(0); // ✅ Always at top level

  if (!show) {
    return <div>Hidden</div>;
  }

  return <div>Count is {count}</div>;
}

Quick Reference

Rule	Description
Only call hooks at the top level	Do not call hooks inside loops, conditions, or nested functions.
Only call hooks from React functions	Call hooks from React functional components or custom hooks, not regular JavaScript functions.
Hooks must start with 'use'	Custom hooks must be named starting with 'use' to follow convention and enable linting.
Use hooks in the same order	Hooks must be called in the same order on every render to keep state consistent.

Key Takeaways

Always call hooks at the top level of your React functional component or custom hook.

Never call hooks inside loops, conditions, or nested functions to avoid breaking React's hook tracking.

Only use hooks inside React functional components or custom hooks, not in regular functions.

Custom hooks must start with 'use' to follow React conventions and enable linting.

Hooks must be called in the same order on every render to keep state and effects consistent.