Rules of Hooks - Rishan Solutions

The Rules of Hooks are a set of guidelines in React that must be followed when using hooks in functional components. These rules ensure that hooks work as expected and help maintain the stability and consistency of your React application.

1. The Rules of Hooks

1.1. Only Call Hooks at the Top Level

You should only call hooks at the top level of a functional component or a custom hook. This ensures that the hooks are called in the same order every time the component renders.

Incorrect:

if (someCondition) {
  const [state, setState] = useState(0);  // Invalid: hook is inside a condition
}

Correct:

const [state, setState] = useState(0);  // Valid: hook is called at the top level
if (someCondition) {
  // Do something with state
}

Reason: React relies on the order of hooks to properly manage the state and lifecycle. If you conditionally call hooks, the order can change between renders, leading to bugs.

1.2. Only Call Hooks from React Functions

Hooks can only be called from:

Functional components.
Custom hooks (functions that start with use).

You cannot call hooks inside regular JavaScript functions, class components, or any non-React code.

Incorrect:

function someFunction() {
  const [state, setState] = useState(0);  // Invalid: hooks can't be called in regular functions
}

Correct:

function MyComponent() {
  const [state, setState] = useState(0);  // Valid: hook is called inside a component
}

Reason: Hooks depend on React’s internal mechanisms to work, and using them outside React functions or custom hooks would break the expected behavior.

2. Why Follow the Rules?

The main reason these rules exist is that React’s rendering mechanism relies on the order and consistency of hooks calls. When hooks are used improperly (such as in conditionals or loops), React may not be able to track their state correctly, leading to bugs or unpredictable behavior.

3. Common Errors Related to Hooks

Using hooks in loops, conditions, or nested functions: If you call hooks inside conditionals or loops, the order of hook calls can change between renders, leading to errors. Incorrect: function MyComponent() { for (let i = 0; i < 3; i++) { const [state, setState] = useState(0); // Invalid: hook inside a loop } return <div>Hello</div>; }
Calling hooks outside of React components or custom hooks: Hooks must only be called from React functions or custom hooks. Incorrect: function someFunction() { const [state, setState] = useState(0); // Invalid: hook not in a component }

4. Example of Proper Hook Usage

Example: Valid usage of hooks inside a functional component:

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

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

  useEffect(() => {
    console.log('Component mounted');
    return () => {
      console.log('Cleanup on unmount');
    };
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

In this example:

useState is called at the top level of the functional component.
useEffect is called at the top level as well, ensuring that hooks are called consistently and in the correct order.

5. When to Use Custom Hooks

You can follow the same rules for custom hooks. A custom hook is just a JavaScript function that can call other hooks, but it must also follow the rules. Correct: function useCounter() { const [count, setCount] = useState(0); return [count, setCount]; } function Counter() { const [count, setCount] = useCounter(); // Custom hook is used here return <button onClick={() => setCount(count + 1)}>Increment</button>; }
Reason: Custom hooks allow you to share logic across components while maintaining the same rules for calling hooks.