React · Hooks (Comprehensive)

Rules of Hooks

Learn the two critical rules for using Hooks correctly in React to avoid bugs and ensure your components work properly.

Find videos you like?

Save to resource drawer for future reference!

The Two Rules of Hooks

Must follow these rules always

Hooks are JavaScript functions, but they impose two additional rules. Following these rules ensures Hooks work correctly!

Only Call Hooks at the Top Level

Don't call Hooks inside loops, conditions, or nested functions

Why? React relies on the order Hooks are called to preserve state between renders. Conditional Hooks break this order.

✅ Call Hooks at the top level of your component
✅ Before any returns
❌ Don't call inside if statements
❌ Don't call inside loops
❌ Don't call inside nested functions

Only Call Hooks from React Functions

Call them from React components or custom Hooks only

Why? Hooks contain React-specific logic that only makes sense in React function components or custom Hooks.

✅ Call from React function components
✅ Call from custom Hooks
❌ Don't call from regular JavaScript functions
❌ Don't call from class components
❌ Don't call from event handlers (unless inside)

ESLint Plugin

Install eslint-plugin-react-hooks to automatically enforce these rules and catch mistakes!

Rule 1: Top Level Only

Right and wrong examples

❌ Wrong: Inside Condition

function Form() {

const [name, setName] = useState('');

if (name !== '') {

// ❌ Never do this!

const [age, setAge] = useState(0);

}

Hook order changes based on condition!

✅ Right: At Top Level

function Form() {

// ✅ Always at top!

const [name, setName] = useState('');

const [age, setAge] = useState(0);

// Condition later is fine

if (name !== '') { ... }

}

Hooks always called in same order!

❌ Wrong: Inside Loop

function List({ items }) {

items.forEach(item => {

// ❌ Never in loops!

const [x, setX] = useState(0);

});

}

✅ Right: Use Array State

function List({ items }) {

// ✅ One state for all!

const [data, setData] = useState([]);

// Process items normally

items.forEach(item => ...)

}

Example: Following the Rules

A component that follows both rules correctly

Properly Structured Component

All Hooks at top level, in React component

Frontend

// ✅ Follows all Hook rules!
function UserProfile() {
  // ✅ Rule 1: All Hooks at top level
  const [name, setName] = React.useState('');
  const [age, setAge] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [isSubmitted, setIsSubmitted] = React.useState(false);

  // ✅ Rule 2: In React function component
  React.useEffect(() => {
    document.title = name || 'Profile';
  }, [name]);

  // Event handlers can be anywhere
  function handleSubmit(e) {
    e.preventDefault();
    setIsSubmitted(true);
    
    setTimeout(() => {
      setIsSubmitted(false);
    }, 3000);
  }

  return (
    <div className="container">
      <h1>👤 User Profile</h1>

      {isSubmitted && (
        <div className="success-message">
          ✅ Profile saved successfully!
        </div>
      )}

      <form onSubmit={handleSubmit} className="form">
        <div className="field">
          <label>Name</label>
          <input
            type="text"
            value={name}
            onChange={(e) => setName(e.target.value)}
            required
            className="input"
          />
        </div>

        <div className="field">
          <label>Age</label>
          <input
            type="number"
            value={age}
            onChange={(e) => setAge(e.target.value)}
            required
            className="input"
          />
        </div>

        <div className="field">
          <label>Email</label>
          <input
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            required
            className="input"
          />
        </div>

        <button type="submit" className="btn-submit">
          Save Profile
        </button>
      </form>

      <div className="info">
        💡 All Hooks declared at component top level!
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<UserProfile />);

Live Preview

Loading preview...

Key Takeaways

Remember these important points

Top Level Only

Always call Hooks at the top level. Never inside loops, conditions, or nested functions.

React Functions Only

Only call Hooks from React function components or custom Hooks.

Consistent Order

React relies on Hook call order. Breaking the rules breaks this order and causes bugs.

Use ESLint

Install the ESLint plugin to catch rule violations automatically during development.

Critical Rules!

These aren't suggestions - they're mandatory for Hooks to work. Always follow both rules, and your components will work perfectly!

Previous Topic

Hooks Overview

Complete guide to React Hooks: why they exist, rules, and how they revolutionized React development.

Next Topic

useState Deep Dive

Advanced useState patterns: functional updates, lazy initialization, and performance considerations.

Ask a Question

Have a question about Rules of Hooks? Ask our AI assistant.

🔐 Login to use AI Assistant

React · Hooks (Comprehensive)

Rules of Hooks

Learn the two critical rules for using Hooks correctly in React to avoid bugs and ensure your components work properly.

Find videos you like?

Save to resource drawer for future reference!

The Two Rules of Hooks

Must follow these rules always

Hooks are JavaScript functions, but they impose two additional rules. Following these rules ensures Hooks work correctly!

Only Call Hooks at the Top Level

Don't call Hooks inside loops, conditions, or nested functions

Why? React relies on the order Hooks are called to preserve state between renders. Conditional Hooks break this order.

✅ Call Hooks at the top level of your component
✅ Before any returns
❌ Don't call inside if statements
❌ Don't call inside loops
❌ Don't call inside nested functions

Only Call Hooks from React Functions

Call them from React components or custom Hooks only

Why? Hooks contain React-specific logic that only makes sense in React function components or custom Hooks.

✅ Call from React function components
✅ Call from custom Hooks
❌ Don't call from regular JavaScript functions
❌ Don't call from class components
❌ Don't call from event handlers (unless inside)

ESLint Plugin

Install eslint-plugin-react-hooks to automatically enforce these rules and catch mistakes!

Rule 1: Top Level Only

Right and wrong examples

❌ Wrong: Inside Condition

function Form() {

const [name, setName] = useState('');

if (name !== '') {

// ❌ Never do this!

const [age, setAge] = useState(0);

}

Hook order changes based on condition!

✅ Right: At Top Level

function Form() {

// ✅ Always at top!

const [name, setName] = useState('');

const [age, setAge] = useState(0);

// Condition later is fine

if (name !== '') { ... }

}

Hooks always called in same order!

❌ Wrong: Inside Loop

function List({ items }) {

items.forEach(item => {

// ❌ Never in loops!

const [x, setX] = useState(0);

});

}

✅ Right: Use Array State

function List({ items }) {

// ✅ One state for all!

const [data, setData] = useState([]);

// Process items normally

items.forEach(item => ...)

}

Example: Following the Rules

A component that follows both rules correctly

Properly Structured Component

All Hooks at top level, in React component

Frontend

// ✅ Follows all Hook rules!
function UserProfile() {
  // ✅ Rule 1: All Hooks at top level
  const [name, setName] = React.useState('');
  const [age, setAge] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [isSubmitted, setIsSubmitted] = React.useState(false);

  // ✅ Rule 2: In React function component
  React.useEffect(() => {
    document.title = name || 'Profile';
  }, [name]);

  // Event handlers can be anywhere
  function handleSubmit(e) {
    e.preventDefault();
    setIsSubmitted(true);
    
    setTimeout(() => {
      setIsSubmitted(false);
    }, 3000);
  }

  return (
    <div className="container">
      <h1>👤 User Profile</h1>

      {isSubmitted && (
        <div className="success-message">
          ✅ Profile saved successfully!
        </div>
      )}

      <form onSubmit={handleSubmit} className="form">
        <div className="field">
          <label>Name</label>
          <input
            type="text"
            value={name}
            onChange={(e) => setName(e.target.value)}
            required
            className="input"
          />
        </div>

        <div className="field">
          <label>Age</label>
          <input
            type="number"
            value={age}
            onChange={(e) => setAge(e.target.value)}
            required
            className="input"
          />
        </div>

        <div className="field">
          <label>Email</label>
          <input
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            required
            className="input"
          />
        </div>

        <button type="submit" className="btn-submit">
          Save Profile
        </button>
      </form>

      <div className="info">
        💡 All Hooks declared at component top level!
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<UserProfile />);

Live Preview

Loading preview...

Key Takeaways

Remember these important points

Top Level Only

Always call Hooks at the top level. Never inside loops, conditions, or nested functions.

React Functions Only

Only call Hooks from React function components or custom Hooks.

Consistent Order

React relies on Hook call order. Breaking the rules breaks this order and causes bugs.

Use ESLint

Install the ESLint plugin to catch rule violations automatically during development.

Critical Rules!

These aren't suggestions - they're mandatory for Hooks to work. Always follow both rules, and your components will work perfectly!

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Hooks Overview

useState Deep Dive

Building Your Learning Module...

Rules of Hooks

Only Call Hooks at the Top Level

Only Call Hooks from React Functions

ESLint Plugin

❌ Wrong: Inside Condition

✅ Right: At Top Level

❌ Wrong: Inside Loop

✅ Right: Use Array State

Properly Structured Component

Top Level Only

React Functions Only

Consistent Order

Use ESLint

Critical Rules!

Hooks Overview

useState Deep Dive

Rules of Hooks

Only Call Hooks at the Top Level

Only Call Hooks from React Functions

ESLint Plugin

❌ Wrong: Inside Condition

✅ Right: At Top Level

❌ Wrong: Inside Loop

✅ Right: Use Array State

Properly Structured Component

Top Level Only

React Functions Only

Consistent Order

Use ESLint

Critical Rules!