Just a little example of how to fix an infinite useEffect loop caused by fixing a eslint exhaustive-deps warning ------------ 🔔 Newsletter eepurl.com/hnderP 💬 Discord / discord 📁. GitHub github.com/cod...
Пікірлер: 64
@merthyr18312 жыл бұрын
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!
@feijao73558 ай бұрын
thank you, been struggling here for 2 hours
@kalinduR96 Жыл бұрын
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.
@gadgetboyplaysmc10 ай бұрын
Does that mean you can get the same functionality as useCallback when you pass a function that returns a function in useMemo?
@CB4TS2 жыл бұрын
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!
@Sapphiamur Жыл бұрын
Oh yes, just what I needed, thank you!! 👌
@mimoduocss2 жыл бұрын
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!
@WebDevCody2 жыл бұрын
Yeah keeping them separate helps them also be reusable in other components if needed
@syamprasadupputalla82332 жыл бұрын
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.🤝🤝
@mohammed.haydar2 жыл бұрын
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 🙃
@allhailalona2 ай бұрын
very very good video, thank you!
@matthewbrignola5510 Жыл бұрын
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 🙏
@matthewbrignola5510 Жыл бұрын
Like I was watching the useEffect working with console logs and was like 🤬 here goes all my api calls
@WebDevCody Жыл бұрын
Isn’t react great?!
@raygo442 жыл бұрын
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.
@auberginesoep53915 ай бұрын
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.
@cwancy2 жыл бұрын
Even though I don't use React in my dev job, your videos are just great and informative.
@alisonoz7219 Жыл бұрын
amazing explanation bro! thank you so much!
@mohiuddinshahrukh Жыл бұрын
Generic feedback, 1. close the left tab 2. Please dont move the screen (scroll) so much its dizzying!
@takeleberhe516811 ай бұрын
Great tutorial to the point thank you for your great explanation!!
@tnsaturday2 жыл бұрын
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.
@WebDevCody2 жыл бұрын
That’s incorrect. UseCallback caches the function reference. Try it out. Make an api that increments by one each request and do this same approach on the UI with useCallback. You’ll get a new number each time. Also, where does it say in the react docs useCallback assumes a pure function? It doesn’t.
@tnsaturday2 жыл бұрын
@@WebDevCody Maybe I mistaked it with useMemo, I'll give it a try, thank you.
@WebDevCody2 жыл бұрын
@@tnsaturday yeah you’re correct, use memo will cache the value
@user-se7dk4rr5u Жыл бұрын
This is very helpful! Thank you!
@paeon212 жыл бұрын
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.
@WebDevCody2 жыл бұрын
I guess I’d ask why is the api fetch in a custom hook and not just a helper method? Are you setting isLoading state or something?
@paeon212 жыл бұрын
@@WebDevCody It's funny, I jumped into making a custom hook without ever asked myself that before, but I've since incorporated both authContext and react-router into my hook for checking authentication on any api call (setting isAuth and authError states) and conditionally navigating to login. Does it sound like I should be extracting the api logic into a helper function, while refactoring the custom hook to focus just on auth handling?
@WebDevCody2 жыл бұрын
@@paeon21 I'd say all axios calls should be wrapped into their own helper functions. You'd use these functions from your components. I also don't think you should even be trying to make these requests unless you're authenticated, so if you have a component that tries to hit a secured endpoint on mount, you shouldn't be rendering it when not logged in.... join my discord, it's too hard to help via yt comments
@paeon212 жыл бұрын
@@WebDevCody Cool. Will do. Thanks.
@nyashachoga93662 жыл бұрын
Which theme are you using?
@WebDevCody2 жыл бұрын
Shades of purple
@solteeme8745 Жыл бұрын
Awesome! Just What I wanted.
@vuxuanhuy9079 Жыл бұрын
useCallback => use memory function useMemo => use memory value (calculator)
@Sky-yy2 жыл бұрын
Very good topic to pick.
@ytaccount83742 жыл бұрын
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.
@totfosk7 ай бұрын
thank you a lot !!!
@FaisalAmin001 Жыл бұрын
thank you!
@farookahmed44964 ай бұрын
Very good content ❤ u bro.
@okopyl Жыл бұрын
Please, leave the link to the code's repo so everyone can check whether or not the code in your video works or not. In my example it does not, since I'm not getting the same warning you do.
@hbela1000 Жыл бұрын
Not junk at all, I have just leant something important.thx.
@user-jb7pr8pt6i10 ай бұрын
this is useful vidoe!
@rajann44 Жыл бұрын
Also keeping the dependency array empty fixes this issue.
@albertogarcia110110 ай бұрын
There is another solution the `useEffectEvent`
@okopyl Жыл бұрын
Why recreating a function reinvokes useEffect? The reference to the function remains the same, meaning getPokemon === getPokemon
@rea1m_ Жыл бұрын
Actually after re-render getPokemon function will have a new reference
@okopyl Жыл бұрын
@@rea1m_ why?
@rea1m_ Жыл бұрын
@@okopyl cuz it recreates the whole component. useCallback preserves the reference and only gets a new one when dependencies change. Go check it out yourself.
@okopyl Жыл бұрын
@@rea1m_ thanks
@ahmrfjamali79582 жыл бұрын
Best solution is useQuery or use custom hooks
@bensonyeboah2972 жыл бұрын
great
@coldym2 жыл бұрын
Ohh I like this over engineered stuff from react
@tnsaturday2 жыл бұрын
React functional components are so complicated compared to Vue clearness.
@WebDevCody2 жыл бұрын
that I will agree with. these hooks make things twice as hard to understand.
@vvan22 Жыл бұрын
@@WebDevCody Agreed, I'm used to work with Vue and just using React for a project, these hooks concept seems easy on docs, but pretty hard to use properly on practice. But I'm wondering, these hooks are there to enable us to optimize how the component works, right? What about Vue, is it able to optimize by itself or what?
@SeibertSwirl2 жыл бұрын
Good job babe!!!! FIRST!!!!!!
@mimoduocss2 жыл бұрын
Shucks do you have super powers!? I was so quick to see this one!! ONA THESE DAYSS!!
@SeibertSwirl2 жыл бұрын
Bahahahaha neverrrrrr!!!!!!!
@vamshikrishnareddy76 Жыл бұрын
i tried doing this ````const [dataone, setdataone] = useState([]); const [datatwo, setdatatwo] = useState([]); const fetchMovies = async () => { const response = await Promise.all([ axios.get("url"), axios.get("url"), ]); console.log(response) setdataone(response[0]) setdatatwo(response[0]) conosole.log(dataone) }, useEffect(() => { fetchMovies(); }, []);``` console.log(dataone) is logging an empty array but console.log(response) logs out the data can some one help
@kalinduR96 Жыл бұрын
setter function provided by useState does not set the value right away. when you call it in somewhere in the code React schedules a re-render of the component with the newly set value. So dataone actually reflects the value in the following re-render. you can clearly see this if you take the console.log(dataone) out of the fetchMovie function. you will see two logs, one with an empty array (your initial value) and the other with data.
@dailymeow32832 жыл бұрын
Best work around might be Next js, fetch the pokemons in getStaticProps then pass em to the page as prop
@WebDevCody2 жыл бұрын
That will work as well and is a good solution, but it won’t solve every issue if your app needs to dynamically fetch data. You’ll eventually run into this same issue if you’re using a linter that wants the useEffect deps array.