React doesn't have a built-in pattern designed for fetching data. This can make it a little confusing at first, so let's look at how we can combine useState and useEffect to create a GitHub profile page.
Download starter files and cd in
The index.html file loads workshop/index.jsx. This imports workshop/App.jsx and renders the component using React.
Managing effects
React components are designed to keep the DOM in-sync with your app's data. For example this component will re-render every time the name prop changes, ensuring the message is always correct:
However some parts of your app cannot be represented with JSX, as they are not part of the DOM. React calls these "effects"—they are extra things your component does (other than the primary task of rendering DOM elements).
In order to ensure React can keep track of these effects and re-run them when our app's data changes we pass them in to the React.useEffect function.
Fetching data is one of these "effects". We run our fetch request inside useEffect so React can control when it runs (or re-runs).
We have a problem here: our API request could take 10 seconds to finish. However React components are synchronous—they must render something straight away. We cannot wait for the response to be done before returning a value.
Instead we need to update our component with the new data once the response finishes. We can make a component update by setting state. Remember that a component will re-run whenever its state values change.
We can't use this data immediately, since the API request is asynchronous. Our component will render at least once with the initial state, which here is null.
The easiest way to make sure the data has loaded before we use it is to check whether the state variable is there:
Here's the flow of our component's updates:
The component is rendered (i.e. <Pokemon /> somewhere)
React calls the Pokemon function
React creates the pokeData
Some time passes...
The fetch request resolves with the response data
Our .then sets the pokeData state as the response object
Avoiding infinite loops
There is one final problem to solve: our component currently always queues a new effect. This means that after our component's state updates (and re-renders the component) it'll send a new fetch request. When this request resolves it'll update the state, re-rendering the component. This will trigger another fetch, and so on.
To avoid this infinite loop we need to constrain when the effect runs, by providing the dependencies array as the second argument. This tells React that the effect only needs to re-run if the things inside the array have changed.
In this case our effect has no dependencies, since it doesn't use any values from outside the effect. So we can specify an empty array:
This tells React "you won't need to re-run this effect, since it doesn't depend on any values that might change and get out of sync".
Challenge 1: user profile
You're going to build a Profile component that fetches a user from the GitHub API and renders their name, avatar image and any other details you like.
Create a new component in workshop/Profile.jsx
It should fetch your profile from "https://api.github.com/users/{username}"
It should render a loading message until the request is done
Re-running effects
Our Profile component would be more useful and reusable if it could fetch any user's GitHub information. Components can be customised by passing in props (just like function arguments). We want to be able to do this:
and have the component fetch that user's profile.
Challenge 2: re-usable profile
Amend Profile to take a name prop
Use this prop to fetch the right data from GitHub
Passing state down
Our Profile component can now fetch any user, but we still have to hard-code the prop when we render it in App. Ideally we'd let users type the name into a search input, then update the prop we pass down when they submit.
We can achieve this with a state value in App that keeps track of the current value of name. When the form is submitted you can update that state value, which will cause the App component to re-render. This will then cause Profile to re-render with the new value of name passed as a prop.
Challenge 3: searching for users
Add a form with a search input to App
Add a name state value to App
When the form is submitted update the state value
Stretch goal: fetching repos
The user response object from GitHub contains a repos_url property. This is a URL from which you can fetch an array of the user's repositories. To display the user's repos underneath their other info we'll have to make another fetch after the first one resolves.
The simplest way to achieve this is by creating a new component that takes the repos_url as a prop, fetches the data, then renders the list of repos.
Create a new component in ReposList.jsx
It should receive a URL as a prop and fetch the repos from it
When it receives a response it should render a list of repos