React Hook 'useEffect' is called in function

The text starts here~

Overview

To resolve the error "React Hook 'useEffect' is called in function that is neither a React function component nor a custom React Hook function", either capitalize the first letter of the function name, or use use as the function name prefix. For example, useCounter make it a component or a custom hook.

Here is an example to show how the error occurs.

 // App.js

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

// 👇️ Not a component (lowercase first letter)
// not a custom hook (doesn't start with use)
function counter() {
  const [count, setCount] = useState(0);

  // ⛔️ React Hook "useEffect" is called in function "counter" that
  // is neither a React function component nor a custom React Hook function.
  // React component names must start with an uppercase letter.
  // React Hook names must start with the word "use".
  useEffect(() => {
    console.log(count);
  }, [count]);

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

The problem with the above snippet is that we are using the useEffect hook in a function that is not a component because it starts with a lowercase letter, nor is it a custom hook because its name does not start with use begins.

declaring components

If you want to declare a component, capitalize the first letter of your function.

 // App.js

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

// 👇️ is now a component (can use hooks)
function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(count);
  }, [count]);

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

export default function App() {
  return (
    <div>
      <Counter />
    </div>
  );
}

Function names must start with a capital letter, as this helps React distinguish built-in elements like p , div , span from our defined components.

As the documentation says:

• Only call Hooks from React function components or custom hooks
• Only use hooks at the top level
• Don't call Hooks in loops, conditionals or nested functions
• Make sure to always use Hook at the top level of your React function and before any return

Declare custom hooks

If you want to declare a custom hook, the name of the custom hook must start with use , for example useCounter .

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

// 👇️ is a custom hook (name starts with use)
function useCounter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(count);
  }, [count]);

  return [count, setCount];
}

export default function App() {
  const [count, setCount] = useCounter();

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

The name of a custom hook must start with use for React to recognize that your function is a custom hook.

Summarize

To fix the "React Hook 'useEffect' is called in function that is neither a React function component nor a custom React Hook function" error, make sure to only call the hook from within a React function component or a custom React Hook function.