imteekay/pokehooks-labs

A laboratory to use pokemons and do some experiments with React Hooks API

Pokehooks Labs

A laboratory to use pokemons and do some experiments with React Hooks API. This is the source code for the React Hooks, Context API, and Pokemons article.

• Building two lists, pokemons and pokedex, with useState
• Sharing data with Context API
• Extracting logic with useReducer
• Building a form to add new pokemons to the list with dispatch
• Fetching data from PokeAPI with fetch, async await, and reducer
• UI improvements

pokehooks-labs's Issues

Infinite loop

Hi there! I spotted a infinite loop while i was playing with the app in codesandbox.

https://codesandbox.io/s/billowing-wildflower-mm5dd?file=/src/Pokemon/PokemonsList.js

Here is the source of the problem:

Inside PokemonContext.js addPokemons must be wrapped with useCallback(...addPokemons, [dispatch]);
const addPokemons = useCallback( pokemons => dispatch({ type: ADD_POKEMONS, pokemons }), [dispatch] );

Also. Inside PokemonList.js you can leave the dependency array of useEffect() empty, so it executes just one time. This way you dont need to use useCallback. :)

I think that the problems is that addPokemons function reference is always being updated when the state in PokemonProvider receive an update.