Why useEffect causes infinite loops - fix it with useCallback

Just a little example of how to fix an infinite useEffect loop caused by fixing a eslint exhaustive-deps warning

------------

[merthyr]

I'm not a react dev, just curious. However, this is a great programming tutorial because it shows the audience different angles to resolve the issue and evaluates them against use-cases. This is something neglected with many tutorial videos!

[feijao]

thank you, been struggling here for 2 hours

[kalinduR]

useCallback and useMemo do the same thing. They just remember the value and stop re-creating functions unnecessarily. The only difference is useCallback returns the entire function while useMemo runs the function and returns the result.

[CBTS]

I am glad I came across this video. I had been ignoring that warning because I didn't know what it meant, but after watching this video, now I can fix it. Thanks!

[mimoduocss]

Ooo we're definitely guilty of some of this over here! I like the idea of separating out api calls. It gets a little wild in there. Thanks for the breakdown!

[Sapphiamur]

Oh yes, just what I needed, thank you!! 👌

[mohammed.haydar]

I've been building a react app for a couple of months now, this problem has occurred a lot it's really irritating this video cleared it a little bit, but I need to apply it to my code to learn it 🙃

[matthewbrignola]

Dude thank you. I had been using useEffect in some of my apps and was passing a state value in as a dependency in the dependencies array and wasn't understanding why api calls were getting made a million times. Definitely not a good thing when you can only make a limited number of api calls per month for certain apis lol. I was looking for how to stop this and had tried watching other videos but nobody was helping, so thank you 🙏

[raygo]

I am working with React app atm and that lint warning for useEffect dependency is annoying. The first solution to move the code outside of component seemed to be the best and simplest imo.

[syamprasadupputalla]

Thank you brother for bringing up this👏👏. I feel you should bring up all react topics in depth as you do. It would be helpful to everyone.🤝🤝

[auberginesoep]

I will try this solution tomorrow, am trying to fix it for multiple hours in my project and stopped to take a break.

Hopefully it will work.

[cwancy]

Even though I don't use React in my dev job, your videos are just great and informative.

[hbela]

Not junk at all, I have just leant something important.thx.

[alisonoz]

amazing explanation bro! thank you so much!

[takeleberhe]

Great tutorial to the point thank you for your great explanation!!

[benlee]

I really appreciate the detail of your breakdown of the infinite loop with function dependencies. What are your thoughts on the case of returning an api fetch callback from a custom hook, which then gets called in useEffect (naturally this triggered the useEffect dependencies warning)? I can't figure out if there's any simple fix for this (or if my code setup is violating some fundamental React principles, haha). Thanks.

[vuxuanhuy]

useCallback => use memory function
useMemo => use memory value (calculator)

[mohiuddinshahrukh]

Generic feedback,
1. close the left tab
2. Please dont move the screen (scroll) so much its dizzying!

[tnsaturday]

BTW, you don't want to use useCallback with your API requests, because it assumes your function is pure, that means it always returns the same result given the same input. But if something happened on the server side and the object you're fetching has changed (like someone patched or deleted the resource), you're not making the request because the response have been cached and you have no way of finding that out.

[ytaccount]

Hi, great video! Thank you! I'm wondering... how do you get the errors on your editor window? e.g. the error (warning?) on 0:21.