Rules of Hooks In React Js

In React, hooks are functions that allow you to use state and other React features in functional components. The most commonly used hooks are useState, useEffect, and useContext. When working with hooks, it's essential to follow the rules to ensure they work correctly. Here are the basic rules of hooks in React:

1. Only Call Hooks at the Top Level:

Hooks should only be called at the top level of your functional components or custom hooks, not inside loops, conditions, or nested functions. This ensures that hooks are called in the same order every time the component renders.

// Good
function MyComponent() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    // effect
  }, [count]);

  // ...

  return (
    // JSX
  );
}        

// Avoid: Hooks inside a nested function
function MyComponent() {
  if (condition) {
    const [count, setCount] = useState(0); // Incorrect
  }

  // ...

  return (
    // JSX
  );
}        

2. Only Call Hooks from React Functions:

Hooks should only be called from functional components or custom hooks. They should not be called from regular JavaScript functions or non-React classes.

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

  // ...

  return (
    // JSX
  );
}        

// Avoid: Calling a hook inside a regular function
function myFunction() {
  const [count, setCount] = useState(0); // Incorrect
}        

3. Don't Call Hooks Conditionally:

Hooks should not be called conditionally. They should always be called in the same order. If you need to conditionally use a hook, you can use it inside the body of your function component.

// Good
function MyComponent({ condition }) {
  const [value, setValue] = useState(0);

  if (condition) {
    // use hook here
  }

  // ...

  return (
    // JSX
  );
}        

// Avoid: Calling a hook conditionally
function MyComponent({ condition }) {
  if (condition) {
    const [value, setValue] = useState(0); // Incorrect
  }

  // ...

  return (
    // JSX
  );
}        

4. Use Hooks in the Same Order:

When using multiple hooks, make sure to use them in the same order in every render. This helps React to correctly associate state with the corresponding hooks.

// Good
function MyComponent() {
  const [count, setCount] = useState(0);
  const [user, setUser] = useState(null);
  useEffect(() => {
    // effect
  }, [count]);

  // ...

  return (
    // JSX
  );
}        

// Avoid: Changing the order of hooks
function MyComponent() {
  const [user, setUser] = useState(null);
  const [count, setCount] = useState(0); // Incorrect
  useEffect(() => {
    // effect
  }, [count]);

  // ...

  return (
    // JSX
  );
}        

5. Use Hooks Inside Functional Components:

Hooks can only be used inside functional components or custom hooks. They should not be used in class components.

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

  // ...

  return (
    // JSX
  );
}        

// Avoid: Using hooks inside class components
class MyComponent extends React.Component {
  const [count, setCount] = useState(0); // Incorrect

  // ...

  render() {
    return (
      // JSX
    );
  }
}        

Following these rules ensures that your components work correctly and that React can manage the state and lifecycle of your functional components. Adhering to these rules helps you avoid common pitfalls and ensures the proper functioning of hooks in your React application.