React Hook ‘useEffect’ is called in function “#” that is neither a React function component nor a custom React Hook function – How to fix it?

React Hook 'useEffect' is called in function that is neither a React function component nor a custom React Hook function

This article will show you how to prevent the React Hook ‘useEffect’ called in the function “#” that is neither a React function component nor a custom React Hook function warning from appearing. Some ways will be mentioned, such as capitalizing the first letter of the component or adding “use” in front of the component.

What causes the error “React Hook ‘useEffect’ is called in function “#” that is neither a React function component nor a custom React Hook function”?

So what is the reason of the error? Let’s see the example below.

Code:

import React, { useEffect } from "react";
 
function message() {
  useEffect(() => {
    showMessage();
  }, []);
 
  const showMessage = () => {
    console.log("Welcome to LearnShareIT");
  };
 
  return (
    <h2>
      React Hook' useEffect' is called in function that is neither a React
      function component nor a custom React Hook function
    </h2>
  );
}
 
export default message;

Output:

You must adhere to the framework’s predefined syntax when you instantiate a functional component in React and use the useEffect hook internally. From the output, we can also see the warning that shows you two ways to fix this error. Read the next part of the article to learn about these two methods.

How to fix the error “React Hook ‘useEffect’ is called in function “#” that is neither a React function component nor a custom React Hook function”?

Capitalizing the first letter of the component

Because React has already defined that React components must start with a capital letter to be distinguishable from a normal function. When you change the name of this function component from “message” to “Message” this warning will go away.

Code:

import React, { useEffect } from "react";
 
function Message() {
  useEffect(() => {
    showMessage();
  }, []);
 
  const showMessage = () => {
    console.log("Welcome to LearnShareIT");
  };
 
  return (
    <h2>
      React Hook' useEffect' is called in function that is neither a React
      function component nor a custom React Hook function
    </h2>
  );
}
 
export default Message;

Output:

Welcome to LearnShareIT

As a result, the component functioned normally and sent the message to the console. Components ought to be capitalized because they are constructors rather than DOM elements. They can cause a variety of issues and can confuse developers with multiple elements if they are not capitalized.

Adding “use” in front of the component name

This is also a recommended practice by the program, and we can add the “use” prefix before the component name and see the difference.

Code:

import React, { useEffect } from "react";
 
function useMessage() {
  useEffect(() => {
    showMessage();
  }, []);
 
  const showMessage = () => {
    console.log("Welcome to LearnShareIT");
  };
 
  return (
    <h2>
      React Hook' useEffect' is called in function that is neither a React
      function component nor a custom React Hook function
    </h2>
  );
}
 
export default useMessage;

With this syntax, we have defined a new hook named useMessage containing useEffect inside. The program will automatically recognize this when you name the component as above.

Summary

To sum up, the article showed you two ways to fix the error: React Hook ‘useEffect’ is called in function “#” which is neither a React function component nor a custom React Hook function. However, I recommend you capitalize the first letter of the component because it will be easier to find and read the component.

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *