React Hooks Overview: Hook Rules

Why Call Hooks Only at the Top Level?

Calling hooks at the top level ensures that hooks are called in the same order every time a component renders.

If hooks were called conditionally or inside loops, React would lose track of the hook order, causing bugs.

• React relies on the order of hook calls to associate state and effects correctly.
• Skipping or reordering hooks between renders breaks React's internal hook state management.

Where Can You Call Hooks?

Hooks can only be called from React function components or from custom hooks you create.

Calling hooks outside these contexts, such as in regular functions or class components, is not allowed.

• React function components are functions that return JSX.
• Custom hooks are functions whose names start with "use" and call other hooks internally.

Correct Usage: Hook at Top Level

In this example, the useState hook is called at the top level of the function component.

Incorrect Usage: Hook Inside Condition

Calling a hook inside a conditional statement breaks the rules and can cause bugs.