DEV Community

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

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

ranewallin profile image Rane Wallin ・2 min read

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

Discussion (16)

pic
Editor guide
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
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
sozonome profile image
Agustinus Nathaniel

Thanks so much, really appreciate the explanations

Collapse
stevehsu profile image
Steve Hsu

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

Collapse
aniruddhmukherjee profile image
Aniruddh Mukherjee

Thanks a ton, Rane!

Collapse
txluong profile image
Alexl

TYSM

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!

Collapse
shnigi profile image
Niki Ahlskog

Thanks, saved a lot of time.

Collapse
mannuelf profile image
Mannuel

amazing thank you, saved me from a ton of googling.

Collapse
talalsiddiqui profile image
Talal Siddiqui

Wonderfull. Thanks.
This was a very irritating issue. and your post help me a lot.