Fetch Data with React.useEffect()

Things happen outside of React.
It's just a fact of life.

React gives us a single function for connecting to all of the events and effects that React doesn't automatically manage.

It's named React.useEffect() and you invoke it with a function.

React.useEffect(() => {
  // doStuff();
})

One of the things we use this function for is fetching data.

React.useEffect(() => {
  fetchPokemon(1);
})

This function will fire every single time the component is rendered.
That includes re-renders by React.useState.

In our Pokemon app, our "Next" button calls setPokemon(), re-rendering and re-running our React.useEffect() function.

function App() {
  let [index, setIndex] = React.useState(0);
  let pokemon = collection[index];

  return (
    <div>
      <button type="button" onClick={() => setIndex(index + 1)}>
        Next
      </button>

      ...
    </div>
  )
}

Give it a try

Use the Code Sandbox below to give this lesson a try directly in the browser.

Assignment

1. Call the React.useEffect() function in the App component
2. Give React.useEffect a function that calls fetchPokemon(index) for data
3. Chain a .then() onto fetchPokemon(index) that logs out the returned json

Follow the 🧵 on Twitter:

Subscribe on YouTube: