Best way to handle a large set of images from an API using React/Redux?

Question

I've been messing around with this Pokemon api https://pokeapi.co/ and building a very rough version of a Pokedex by listing all of the pokemon on a page and making them links that send you to a more detailed page of the Pokemon you selected.

Obviously it's a very large set of data, almost 1000 entries. It's a very simple React app that uses Axios to map through the Pokemon and grab their name and image to display on the home page.

So that's where my problem starts, on every reload Axios is doing about 1000 requests for images.

What would be the best way to cache and serve the images and names so that I don't have to load them every time I hit the page?

Here's a bit of the code to give you an idea of what I've done so far:

function App() {
  const [pokemonList, setPokemonList] = useState([]);
  useEffect(() => {
    const fetchData = async () => {
      let response = await axios.get('https://pokeapi.co/api/v2/pokemon/');
      setPokemonList(response.data.results)
      return response;
    };

    fetchData();
  }, []);

  return (
    <Grid container>
      <Router>

        <Switch>
          <Route path="/pokedex/:id">
            <PokedexEntry pokemonList={pokemonList} />
          </Route>
          <Route path="/">
            <Home pokemonList={pokemonList} />
          </Route>
        </Switch>

      </Router>
    </Grid>
  );
}

This is the actual "Tile" that contains the pokemon image and name. There would be roughly 800 of these.

const PokemonTile = ({ data }) => {

    const [pokemonData, setPokemonData] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            let response = await axios.get(data.url);
            setPokemonData(response.data)
            return response;
        };

        fetchData();
    }, []);

    return (
        <li className="pokemonTile">
            <Link to={`/pokedex/${pokemonData.id}`}>
                {pokemonData.sprites ? <img src={pokemonData.sprites.front_default} /> : ''}
                <div>
                    {pokemonData.name}
                </div>
            </Link>
        </li>
    )
}

Preferably, I don't want to implement any sort of lazy loading as I'd like the user to see all of the entries seamlessly once they've loaded. Should I try to serve the images myself rather than call them from and API and just let the API handle grabbing text?

score 1 · Accepted Answer · answered Oct 25 '20 at 17:46

The best thing would be to use a Service Worker and cache all the images. Then render them virtually so the browser only loads the image when it's needed. Check out React's virtual lists.

If you want to cache the API calls I suggest you to use our official wrapper. https://github.com/PokeAPI/pokeapi-js-wrapper

Best way to handle a large set of images from an API using React/Redux?

1 Answers1