React Hook "useEffect" is called in function "shoes" which is neither a React function component or a custom React Hook

user_4207765 0
Viewed 15513

I'm getting the following error:

React Hook "useEffect" is called in function "shoes" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks

I'm not sure exactly what is the error in my code:

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

function shoes() {
    useEffect(() => {
        fetchItems();
    }, []);

    const fetchItems = async () => {
        const data = await fetch('xxxxxxxxxxxxxxxxxxxxx')
        console.log(data)
    };

    return ( < h1 className = "main" > Shoes < /h1> );
    }
}

export default shoes;
react-hooks reactjs javascript
2 Answers

As described here, React component names need to start with a capital letter.
That's because React treats components starting with a lowercase letter as DOM tags.

Therefore you should name it Shoes.

user_77366170

I would also like to add the solution that worked for me. This was supposed to be a component so capitalizing the first letter worked, but if you're trying to create a hook and the above error occurs then append use at the start of your hook. For example useShoes()

user_97451040
Related