javascript - Hooks can only be called inside the body of a function component. (fb.me/react-invalid-hook-call)

Question

import  { useEffect } from "react";

export const Routes = () => {
  useEffect(() => {
    console.log("red")
  }, []);

  const a = [{ name: "sathish" }];
  const b = [{ name: "pandi" }];
  const c = [{ name: "suren" }];
  if (false) {
    return a;
  } else {
    return b;
  }
};

With this code I have error like × Hooks can only be called inside the body of a function component.

Answer 1

Take a look at the Rules of Hooks to understand their restrictions and what they're meant to be used for.

Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function. By following this rule, you ensure that Hooks are called in the same order each time a component renders.

Unlike other answers and comments, importing React and returning JSX is not a requirement for a function to be considered a component.

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

The minimal requirements of a React component:

1. return a React element¹ which can be anything that can be rendered: numbers, strings, other elements or an array of any of these.
   Note that booleans and null are ignored. Returning strictly undefined (or not returning, which is the same) would fail.

2. then it must be used as a component: <MyComponent /> or React.createElement(MyComponent) inside the rendering phase.

You're not using Routes as a React component, you're calling it as a function, outside the rendering phase.

import Cookies from 'js-cookie';
import { Routes } from 'routes.js'
import { Redirect } from 'react-router-dom';
const routes = Routes(); // <-- Called as a function, not a component

This is why you're getting the error.

While you're calling useEffect at the right place inside the Routes function, since it's not called within React's rendering flow, React is detecting it as if it was outside of a function component.

---

That being said, since you're not explaining what you're trying to accomplish, we can't tell you how to fix it. Telling you to use Routes as it is inside another component might be misleading.

---

^{1. While referred as element in the React documentation, it's known as a node when dealing with prop-types.}