[React] Fetch Data with React Suspense

Let's get started with the simplest version of data fetching with React Suspense. It may feel a little awkward, but I promise you that you wont be writing your code like this. When Suspense is stable, there will be libraries that integrate with Suspense. But this is approximately what those abstractions will do, so it's a good thing to know.

 

For a normal React App process, we need to first init component 'PokemonInfo', then we send a fetch request to get data from server.

function App() {
  return (
    <div className="pokemon-info">
        <PokemonInfo />
    </div>
  )
}

 

Using Suspense, we don't need to wait component init, we can send request in the very beginning.

To do that, we can wrap the component inside:

<React.Suspense
    fallback={
      console.log('loading pokemon...') && <div>Loading pokemon...</div>
    }
>
  <Your-component / >
</React.Suspense>

You need to provide a 'fallback' prop which provide a JXS to rendering during fetching the data.

function App() {
  return (
    <div className="pokemon-info">
      <React.Suspense
        fallback={
          console.log('loading pokemon...') && <div>Loading pokemon...</div>
        }
      >
        <PokemonInfo />
      </React.Suspense>
    </div>
  )
}

 

For the data fetching and component rendering:

'pokemonPromise': send fetching request right away, then assign the data to variable 'pokemon'.

Inside component, we just check whether we have 'pokemon' data already, if not, we 'throw poekmonPromise', React Suspense will catch the promise, when it resolves, React will render the component.

let pokemon
let pokemonPromise = fetchPokemon('pikachu').then(p => {
  console.log('promise resolve')
  pokemon = p
})

function PokemonInfo() {
  console.log('PokemonInfo init')

  if (!pokemon) {
    throw pokemonPromise // this API might change
  }

  return (
    <div>
      <div className="pokemon-info__img-wrapper">
        <img src={pokemon.image} alt={pokemon.name} />
      </div>
      <PokemonDataView pokemon={pokemon} />
    </div>
  )
}

/*
loading pokemon... // fallback rendering
promise resolve.     // data fetched
loading pokemon... // re-rendering the component inside React.Suspense
PokemonInfo init.   // component rendered
*/

 

---

import React from 'react'
import fetchPokemon from '../fetch-pokemon'
import {PokemonDataView} from '../utils'

let pokemon
let pokemonPromise = fetchPokemon('pikachu').then(p => {
  console.log('promise resolve')
  pokemon = p
})

function PokemonInfo() {
  console.log('PokemonInfo init')

  if (!pokemon) {
    throw pokemonPromise // this API might change
  }

  return (
    <div>
      <div className="pokemon-info__img-wrapper">
        <img src={pokemon.image} alt={pokemon.name} />
      </div>
      <PokemonDataView pokemon={pokemon} />
    </div>
  )
}

function App() {
  return (
    <div className="pokemon-info">
      <React.Suspense
        fallback={
          console.log('loading pokemon...') && <div>Loading pokemon...</div>
        }
      >
        <PokemonInfo />
      </React.Suspense>
    </div>
  )
}

export default App