Why did Ashish Ranjan deactivate his account

React Hook "useState" is called in the "app" function, which is neither a React function component nor a user-defined React Hook function

I'm trying to use React Hooks for a simple problem

with the following dependencies.

but i still get the following error:


Line 7:
React Hook "useState" is called in the "app" function, which is neither a React function component nor a user-defined React Hook function

Line 39:
'state' is not
no-undef defined

Look for the keywords to learn more about each bug.

The component code is below:

Person component


Try capitalizing "app" like

In React, components must be capitalized and custom hooks must begin with them.

I feel like we're doing the same course at Udemy.

If so, just capitalize that


Do as good as you can for that


It works fine for me.

As far as I know, there is a linter in this package. And it requires your component to start from the capital character. Please check that.

For me, however, it is sad.

Use the uppercase letter in the function name. e.g .: -

Just try to capitalize your app name

You receive the following error message: "React Hook" useState "is called in the" App "function, which is neither a React function component nor a user-defined React Hook function."

Solution: Basically you have to activate the function.

For example:

I had the same problem. It turns out that the capitalization of the "A" in "App" was the problem. Even if you are exporting: Make sure you are also exporting the same name "App".

Components should start with capital letters. Also remember to change the first letter in the line to be exported!

Reaction component names should are capitalized and custom hook functions should start with the keyword start use to identify it as a React Hook function.

So activate your App Components in App

I had the same problem but not with the app. I had a custom class but used a lowercase letter to start the function name and got the error too.

The first letter of the function name and the export line were changed in CamelCase and the error has disappeared.

In my case the end result was something like:

That solved my problem.

The solution is simple, correct "App" and capitalize "App" with the first character.

In JSX, the lowercase tag name is considered a native HTML component. To react, you recognize the function as a reaction component, you have to capitalize the name.


Replace this

with this

Make the function name big. That works for me.

For the following error, capitalize the first letter of the component as well as the export.

As Yuki pointed out, the solution is to capitalize the component name. It is important to note that not only the "standard" app component must be activated, but all components:

This is due to the eslint-plugin-react-hooks package, especially the isComponentName () function in the RulesOfHooks.js script.

Official explanation from the Hooks FAQs:

We offer an ESLint plugin that enforces hook rules to avoid errors. It assumes that any function that begins with "use" and an uppercase letter immediately after it is a hook. We understand that this heuristic is imperfect and there may be some false positives, but without an ecosystem-wide convention, there is simply no way to make hooks work well - and longer names will keep people from adopting hooks or the convention to follow.

First of all, you need to put the first of your components, in your case in upper case App should App and person should person .

I tried copying your code hoping to find the problem. Since you didn't share how you did the App Calling component, there is only one way I can see of making this a problem.

This is the link in CodeSandbox: Invalid hook call.

Why? Because of the following code which is incorrect:

It should have been:

For more information, see Rule of the Hooks - Respond

Hope that helps!

Use uppercase letters to define the function component name / React hook for custom components. "const 'app' should be const 'app'.



[ReactHooks] [useState] [ReactJs]

Step 1: Change the filename from src / App.js to src / app.js.

Step 2: Click "Yes" for "Update imports for app.js".

Step 3: Restart the server.

When working with a React functional component, always keep the first letter of the component's name in uppercase to avoid these React hooks errors.

In your case, you named the component which should be modified as mentioned above to avoid the React Hook error.