I noticed after running the app that we were doing duplicate calls for all Pokemon + images we were rendering. The calls were coming from the service, but ultimately, it was the PokemonDisplay.tsx file that was trying to re-fetch the data all the time.
At its core, I believe it was because of how we implemented useEffect in #70 . When the hook was first put in, there were no dependencies fed to it. This will cause it to default to the behaviour of running useEffect every time the component renders.
I've fed the appropriate dependencies to useEffect, and wrapped some declarations in useCallback and useMemo for performance reasons. Details will be annotated in the file.
I noticed after running the app that we were doing duplicate calls for all Pokemon + images we were rendering. The calls were coming from the service, but ultimately, it was the
PokemonDisplay.tsxfile that was trying to re-fetch the data all the time.At its core, I believe it was because of how we implemented
useEffectin #70 . When the hook was first put in, there were no dependencies fed to it. This will cause it to default to the behaviour of runninguseEffectevery time the component renders.I've fed the appropriate dependencies to
useEffect, and wrapped some declarations inuseCallbackanduseMemofor performance reasons. Details will be annotated in the file.