How to fix React Hook ‘useState’ is called in function that is neither a React function component nor a custom Reacts Hook function

The “React Hook ‘useState’ is called in function that is neither a React function component nor a custom Reacts Hook function” error occurs when the program realizes the useState hook is being used in an unauthorized place in React. Let’s find out the ways to fix it.

The reason for the error

When you use useState in a component, and the program detects that the component is not a React function component or a custom React Hook function, it will throw an error. Follow the error example below.

Code:

import React, { useState } from "react";

const app = () => {
    const [user] = useState({ name: "John", age: 22 });

    return (
        <>
            <span> The user name is: </span> {user.name}
            <span> The user age is: </span> {user.age}
        </>
    );
};

export default app;

Output:

So how can this error be fixed? Read the next part of the article for how-to, along with visual examples.

How to fix the error “React Hook ‘useState’ is called in function that is neither a React function component nor a custom Reacts Hook function“

Because the hook property is only used in a React function component or a custom React Hook function, if you use it in another component with these two formats, the program will give you an error so you can debug it.

Fix the component name to capitalize the first letter

In case you carelessly do not capitalize the first letter of the component, the program will not recognize if it is a React function component or a custom React Hook function, so you need to change the name of the React function correctly with the format that Reacts offers.

Code:

import React, { useState } from "react";

const App = () => {
    const [user] = useState({ name: "John", age: 22 });

    return (
        <>
            <span> The user name is: </span> {user.name}
            <hr />
            <span> The user age is: </span> {user.age}
        </>
    );
};

export default App;

Output:

We only need to change from “app” to “App” and the program will recognize this function component and allow you to use the useState hook to store the user’s value. The program will generally run without any more errors, or you can also refer to how to fix errors below.

Change file name method

Or you can change the name of the file containing the component using useState with the following three steps to fix the error. React Hook ‘useState’ is called in function that is neither a React function component nor a custom React Hook function

• Step one, you edit the component’s file name from “App.js” to “app.js” so that it can fit the name you give the function component.
• Step two, when it says “Update imports for app.js, ” you will confirm and change the file name.
• Finally, you rerun the program with the command npm start.

This way, you can rename the file the same as the name in the function, and the program can now recognize and allow using the useState hook inside. However, this method is entirely inconsistent with React’s file naming standards, so I do not recommend it.

Summary

To recap, we’ve covered the reason and how to fix React Hook ‘useState’ is called in function that is neither a React function component nor a custom React Hook function through the article. However, you should use the standard method of renaming the component according to the React document

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs