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;
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.
Top comments (16)
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.
This is a nice tip, Rane 🙂
You solved my problem with a quick answer, Thanks Rane!!!
Yay. Such a simple thing. Such a simple solution. I guess I missed them specifying this in the documentation
Thanks Rane for this post. It helped me to address this issue.
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!
Thank you Rane!
Thank you Rane!
Thanks Rane, great advice, i needed exactly it.
Thanks Rane, you helped me a lot!