React Hooks Rules Explained — The Rules of Hooks

In this tutorial, you will learn about React Hooks Rules Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

React hooks rules enforce a consistent call order across renders, ensuring hooks work correctly with React's internal state tracking mechanism.

What You'll Learn

• The two rules of hooks
• Why hooks must be called unconditionally
• Why hooks cannot be in conditions or loops
• How the ESLint plugin helps
• Common rule violations and fixes

Why It Matters

Breaking hooks rules causes bugs that are hard to debug: state gets out of order, effects run on the wrong values, and the component crashes with confusing errors.

// BAD: Conditional hook call
function UserProfile({ user }) {
  if (user) {
    const [name, setName] = useState(user.name); // VIOLATION
  }
  return <div>...</div>;
}

// GOOD: Always call hooks
function UserProfile({ user }) {
  const [name, setName] = useState(user?.name || "");
  return <div>...</div>;
}

// BAD: Hook in a loop
function Items({ list }) {
  list.forEach(item => {
    const [state, setState] = useState(item); // VIOLATION
  });
}

// GOOD: Use useReducer or manage state differently
function Items({ list }) {
  const [items, setItems] = useState(list);
}

Expected output: Hooks are called unconditionally at the top level of the component, ensuring consistent call order across renders.