DEV Community

Cover image for JS Bites: React hook is called in a function which is neither a React function or [sic] a custom React Hook
Rane Wallin
Rane Wallin

Posted on

JS Bites: React hook is called in a function which is neither a React function or [sic] a custom React Hook

So, you've decided to dive into React Hooks. Things have been going well (hopefully) until you get a mysterious error similar to the one below.

import React, { useState } from 'react';

const landingPage = ({ user }) => {
  const [user, setUser] = useState(user);

  return (
    <div>
      <span> Your users is </span> { user.name }
    </div>
  );
}

export default landingPage;
Enter fullscreen mode Exit fullscreen mode

Error: React Hook "useState" is called in a function "landingPage" which is neither a React function or a custom React Hook function.

Oh no! What happened? Setting aside the awful grammar in that error message, what else went wrong? It certainly looks like a React component. You've imported React. You've imported useState. You are exporting your function. Everything should be working, but it's not.

Here's the gotcha, when you are using React Hooks, your functional component's name MUST start with a capital letter. In this case, the function name is landingPage. If you change it to LandingPage it will work as expected.

Likewise, if you are going to use a hook inside of a hook custom hook, the name of the custom hook MUST start with "use" (lowercase).

If you are wondering why, check out the React documentation on the subject.


 JS Bites

 Have you ever need a quick solution to a problem, but when you search 
 Google you are met with pages of tutorials and detailed instructions that 
 bury the information you need? That's what JS Bites attempts to solve. 
 Each post is a small, bite-sized primer on a very specific JS topic. The 
 aim is to provide enough detail to boost understanding, but not so much that 
 you become overwhelmed or lost.
Enter fullscreen mode Exit fullscreen mode

Top comments (16)

Collapse
 
daveskull81 profile image
dAVE Inden

Great post. I ran into this very problem last week. I was surprised that my searching didn’t turn up a quick answer like this. Great idea on the series. I look forward to more.

Collapse
 
dance2die profile image
Sung M. Kim

This is a nice tip, Rane 🙂

Collapse
 
stevehsu profile image
Steve Hsu

You solved my problem with a quick answer, Thanks Rane!!!

Collapse
 
reythedev profile image
Rey van den Berg

Yay. Such a simple thing. Such a simple solution. I guess I missed them specifying this in the documentation

Collapse
 
samarpanda profile image
Samar Panda

Thanks Rane for this post. It helped me to address this issue.

Collapse
 
acanalez profile image
Alexi Canales

Thank you for the awesome article! I was referencing old code while building a new app. I was so stumped as to why I kept receiving this ambiguous error. Thank you!

Collapse
 
jduttweiler profile image
Jonatan

Thank you Rane!

Collapse
 
seyoongit profile image
seyoongit

Thank you Rane!

Collapse
 
herbowicz profile image
Greg

Thanks Rane, great advice, i needed exactly it.

Collapse
 
marcelolynx profile image
Marcelo Lynx

Thanks Rane, you helped me a lot!