[reactjs] React Hook "useState" is called in function "app" which is neither a React function component or a custom React Hook function

I'm trying to use react hooks for a simple problem

const [personState,setPersonState] = useState({ DefinedObject });

with following dependencies.

"dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.0"
}

but I'm still getting the following error:

./src/App.js

Line 7:
React Hook "useState" is called in function "app" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks

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

Search for the keywords to learn more about each error.

Component code is below:

import React, {useState} from 'react'; 
import './App.css'; 
import Person from './Person/Person'; 

const app = props => { 
    const [personState, setPersonSate] = useState({ person:[ {name:'bishnu',age:'32'}, {name:'rasmi',age:'27'}, {name:'fretbox',age:'4'} ], }); 
    return (
        <div className="App"> 
            <h2>This is react</h2> 
            <Person name={personState.person[1].name} age="27"></Person>
            <Person name={personState.person[2].name} age="4"></Person> 
        </div> ); 
    };
    export default app;

Person component

import React from 'react'; 

const person = props => { 
    return( 
        <div>
            <h3>i am {props.name}</h3>
            <p>i am {props.age} years old</p>
            <p>{props.children}</p>
        </div> 
    )
};

export default person; 

        import React, { useState } from "react"

    const inputTextValue = ({ initialValue }) => {
        const [value, setValue] = useState(initialValue);
        return {
            value,
            onChange: (e) => { setValue(e.target.value) }
        };
    };

    export default () => {
        const textValue = inputTextValue("");
        return (<>
            <input {...textValue} />
        </>
        );
    }

/*"Solution I Tired Changed Name of Funtion in Captial "*/

    import React, { useState } from "react"

const InputTextValue = ({ initialValue }) => {
    const [value, setValue] = useState(initialValue);
    return {
        value,
        onChange: (e) => { setValue(e.target.value) }
    };
};

export default () => {
    const textValue = InputTextValue("");
    return (<>
        <input {...textValue} />
    </>
    );
}

React Hook "useState" is called in function "App" which is neither a React function component or a custom React Hook function"

For the following error , capitalize the component first letter like, and also the export also.

const App  = props => {
...}
export default App;

I had the same issue, but not with the App. I had a custom class but used a lowercase letter to start the function name and also received the error.

Changed the first letter of the function name and the export line to CamelCase and error gone.

in my case the end result was something like:

function Document() {
....
}
export default Document;

this solved my problem.

You are getting this error: "React Hook "useState" is called in function "App" which is neither a React function component or a custom React Hook function"

Solution: You basically need to Capitalize the function.

For example:

const Helper =()=>{}_x000D_
_x000D_
function Helper2(){}

I feel like we are doing the same course in Udemy.

If so, just capitalize the

const app

To

const App

Do as well as for the

export default app

To

export default App

It works well for me.

Try to capitalize 'app' like

const App = props => {...}

export default App;

In React, components need to be capitalized, and custom hooks need to start with use.

In the app function you have incorrectly spelled the word setpersonSate, missing the letter t, thus it should be setpersonState.

Error:

const app = props => { 
    const [personState, setPersonSate] = useState({....

Solution:

const app = props => { 
        const [personState, setPersonState] = useState({....

the First character of your function should be an Uppercase

Use Capital letter for defining functional component name/ React hooks custom components. "const 'app' should be const 'App'.

App.js

import React, { useState } from 'react';
import { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Person from './Person/Person';

const App = props => {
  const [personState, setPersonState] = useState({
    persons : [
          {name: 'a', age: '1'},
          {name: 'b', age: '2'},
          {name: 'c', age: '3'}
    ]
  });

    return (
      <div>
     <Person name = {personState.persons[0].name} age={personState.persons[0].age}> First </Person>
     <Person name = {personState.persons[1].name} age={personState.persons[1].age}> Second </Person>
     <Person name = {personState.persons[2].name} age={personState.persons[2].age}> Third </Person>    
    );
};
export default App;

Person.js

import React from 'react';

const person = (props) => {
return (
        <div>
<p> My name is {props.name} and my age is {props.age}</p>
<p> My name is {props.name} and my age is {props.age} and {props.children}</p>
<p>{props.children}</p>
        </div>
)
};

[ReactHooks] [useState] [ReactJs]

Make function name capital. This works for me.

export default function App() { }

Replace this

export default app;

with this

export default App;

Use const App instead of const app

In JSX, the lower-case tag name is considered as html native component. In order to react recognise the function as React component, need to Capitalized the name.

Capitalized types indicate that the JSX tag is referring to a React component. These tags get compiled into a direct reference to the named variable, so if you use the JSX <Foo /> expression, Foo must be in scope.

https://reactjs.org/docs/jsx-in-depth.html#html-tags-vs.-react-components

I had the same issue. turns out that Capitalizing the "A" in "App" was the issue. Also, if you do export: export default App; make sure you export the same name "App" as well.

The solution, as Yuki already pointed, is to capitalize the component name. It's important to note that not only the "default" App component needs to be capitalized, but all components:

const Person = () => {return ...};

export default Person;

This is due to eslint-plugin-react-hooks package, specifically isComponentName() function inside RulesOfHooks.js script.

Official explanation from Hooks FAQs:

We provide an ESLint plugin that enforces rules of Hooks to avoid bugs. It assumes that any function starting with ”use” and a capital letter right after it is a Hook. We recognize this heuristic isn’t perfect and there may be some false positives, but without an ecosystem-wide convention there is just no way to make Hooks work well — and longer names will discourage people from either adopting Hooks or following the convention.

Do not use arrow function to create functional components.

Do as one of the examples below:

function MyComponent(props) {
  const [states, setStates] = React.useState({ value: '' });

  return (
    <input
      type="text"
      value={states.value}
      onChange={(event) => setStates({ value: event.target.value })}
    />
  );
}

Or

//IMPORTANT: Repeat the function name

const MyComponent = function MyComponent(props) { 
  const [states, setStates] = React.useState({ value: '' });

  return (
    <input
      type="text"
      value={states.value}
      onChange={(event) => setStates({ value: event.target.value })}
    />
  );
};

If you have problems with "ref" (probably in loops), the solution is to use forwardRef():

// IMPORTANT: Repeat the function name
// Add the "ref" argument to the function, in case you need to use it.

const MyComponent = React.forwardRef( function MyComponent(props, ref) {
  const [states, setStates] = React.useState({ value: '' });

  return (
    <input
      type="text"
      value={states.value}
      onChange={(event) => setStates({ value: event.target.value })}
    />
  );
});

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

Do you have the right import ?

import React, { useState } from 'react';

As far as I know a linter is included into the this package. And it requires you componend should begin from Capital character. Please check it.

However as for me it's sad.

If you are still looking for answer of this question all above stated solution work fine but still i will provide the running/correct code below (edited)

import React, { useState } from 'react';
import './App.css';
import Person from './Person/Person'

  const App = props => {
    const [personsState, setPersonsState ] = useState({
      persons:[
        {name: 'Ram', age: 20},
        {name: 'Rahul', age: 24},
        {name: 'Ramesh', age: 25}
      ],
      otherState: 'Some Other value' 
    });

    const switchNameHandler = () => {
      //console.log('Click is working');
      //Dont Do THIS: this.state.persons[0].name = 'singh';
      setPersonsState({
        persons:[
        {name: 'Ram',age: 20},
        {name: 'Raj', age: 24},
        {name: 'yts', age: 30} 
      ]
    });
    };

    return (
      <div className="App">
        <h1>Nice two one three  Hello i am a noob react developer</h1>
        <button onClick={switchNameHandler}>Switch Name</button>
        <Person name={personsState.persons[0].name} age={personsState.persons[0].age} />
        <Person name={personsState.persons[1].name} age={personsState.persons[1].age}> My hobbies are Gaming</Person>
        <Person name={personsState.persons[2].name} age={personsState.persons[2].age} />
      </div>
    ); 
    // return React.createElement('div',{className:'App'}, React.createElement('h1', null, 'Hi learning the basics of react'));
}

export default App;

Capitalize the app to App will surely work.

React components (both functional as well as class) must begin with a capital letter. Like

const App=(props)=><div>Hey</div>

class App extends React.Component{
   render(){
     return <div>Hey</div>
   }
}

React identifies user-defined components by following this semantic. React's JSX transpiles to React.createElement function which returns an object representation of the dom node. The type property of this object tells whether it is a user-defined component or a dom element like div. Therefore it is important to follow this semantics

Since useState hook can only be used inside the functional component(or a custom hook) this is the reason why you are getting the error because react is not able to identify it as a user-defined component in the first place.

useState can also be used inside the custom hooks which is used for the reusability and the abstraction of logic. So according to the rules of hooks, the name of a custom hook must begin with a "use" prefix and must be in a camelCase

First of all, you need to uppercase the FirstLetter of your components, in your case app should be App and person should be Person.

I tried to copy your code in the hope of finding the issue. Since you did not share how you call the App component, I can only see 1 way to result this to an issue.

This is the link in CodeSandbox: Invalid hook call.

Why? Because of the code below which is wrong:

ReactDOM.render(App(), rootElement);

It should have been:

ReactDOM.render(<App />, rootElement);

For more info, you should read Rule of Hooks - React

Hope this helps!

May be you have added the useEffect that depends on the condition before the one with no condition

EX:

useEffect(() => {
  _anyFunction();
}, []);
    
useEffect(()=> {
  anyCode....
}, [response]);

The solution is simple, correct "app" and write "App" with the first character in uppercase.

Whenever working with a React functional component, always keep the first letter of the name of the component in Uppercase in order to avoid these React Hooks errors.

In your case, you have named the component app, which should be changed to App, as I said above, to avoid the React Hook error.

Step-1: Change the file name src/App.js to src/app.js

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

Step-3: Restart the server again.

Just try to capitalize your App name

const App = props => {...}

export default App;

Use first letter capital in the function name.

function App(){}

React components names should be capitalized and custom hooks functions should start with the use keyword to identify as a react hook function.

So, capitalize your app components to App