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

Question

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;

WOW! That fixed the issue! "Shoes". So in conclusion all components must start with a capital letter? Thank you for the help! — Joe
Also, both ways work: function Shoes() and const Shoes = () =>{ just needs the capital letter in the beginning — Joe
yes, they did this in order to have clear distinction between <div>, <a> etc. and React components — Arnaud Claudel

Arnaud Claudel Arnaud Claudel · Accepted Answer · 2020-03-23T17:21:07

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.

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

1 Answers