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 (
      <span> Your users is </span> { }

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)

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.

dance2die profile image
Sung M. Kim

This is a nice tip, Rane 🙂

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

samarpanda profile image
Samar Panda

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

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!

jduttweiler profile image

Thank you Rane!

sozonome profile image
Agustinus Nathaniel

Thanks so much, really appreciate the explanations

stevehsu profile image
Steve Hsu

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

amkhrjee profile image
Aniruddh Mukherjee

Thanks a ton, Rane!

txluong profile image


seyoongit profile image

Thank you Rane!

herbowicz profile image

Thanks Rane, great advice, i needed exactly it.

marcelolynx profile image
Marcelo Lynx

Thanks Rane, you helped me a lot!

shnigi profile image
Niki Ahlskog

Thanks, saved a lot of time.

mannuelf profile image

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

talalsiddiqui profile image
Talal Siddiqui

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