How to fix the missing dependency warning when using useEffect React Hook

Question

With React 18.3.1, I get this error when I attempt to prevent an infinite loop on a fetch request:

src\pages\ItemDetail.js
Line 16:8: React Hook useEffect has a missing dependency: 'id'.remove the dependency array react-hooks/exhaustive-deps

ove the dependency array react-hooks/exhaustive-deps

export default function ItemDetail({ cartItems, setCartitems }) {

    const [product, setProduct] = useState(null);
    const [qty, setQty] = useState(1);
    const { id } = useParams();

    useEffect(() => {
        
        fetch(process.env.REACT_APP_URL + "/product/" + id)
            .then(res => res.json())
            .then(res => setProduct(res.product))
    }, [])

Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. — Community
– Community Bot, Commented Aug 23, 2024 at 11:44
It's not exactly clear what is unclear about the error message. id is an external (to the hook) dependency and should be added to the dependency array, e.g. useEffect(() => { /* code that references id */ }, [id]);. What infinite loop are you referring to though? I don't see anything that would cause a render loop here unless you somehow added product as a dependency which the effect updates. Please edit to clarify the exact problem you have and include a complete and accurate minimal reproducible example and the complete error message. — Drew Reese
– Drew Reese, Commented Aug 23, 2024 at 19:14

Jeppe Hasseriis · Accepted Answer · 2024-08-23 08:20:07Z

-1

The short answer is that you need to add id to the hook dependency list.

But I assume what you mean by "attempt to prevent an infinite loop" is that you removed it intentionally?

As stated in the hooks documentation you should not "use Effects to orchestrate the data flow of your application". You'll only run into problems, trust me, we've all been there. 😆

If you need to fetch data, I recommend using react-query which is designed to do exactly that. https://tanstack.com/query/latest

I know there's a ton of examples out there showing fetch in useEffect, and while it is possible, it's better to use a solution that is to solve this task specifically.

answered Aug 23, 2024 at 8:20

Jeppe Hasseriis

3552 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

vairamuthu Over a year ago

in which place can add id

Jeppe Hasseriis Over a year ago

Please read the documentation, it will be much more useful then asking here. react.dev/reference/react/…

Collectives™ on Stack Overflow

How to fix the missing dependency warning when using useEffect React Hook

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related