Often when you create a React app, you will want to fetch data from an API and display it inside your components. How do we do this in React?

You might think that we could just fetch the data in the component like this, but unfortunately it won’t work. Try it out in the CodeSandbox below.

This is because React is synchronous, while fetch is asynchronous. If we look in the console, we’ll see that the imgSrc will always be null when we try to render it. React will try to render before fetch has had time to get the data from the API.

So how do we fix this? We need to use a React hook called useEffect.

Effect here means “side effect”. We use the useEffect() hook to run code that has side effects, like fetching data from an API. We use these sparingly, because they can make our code harder to reason about.

Modern web applications often involve interacting with forms such as creating an account, adding a blog post or posting a comment. We need to declare form inputs and get the values entered by users to do something with it (like display them on a page or send them in a POST request). So, how do we do this in React?

A popular pattern for building forms and collect user data is the controlled component pattern. A pattern is a repeated solution to a problem that is useful in multiple similar cases. Let’s have a look at an example:

We’re controlling the value of the input by using the value from the reminder state. This means that we can only change the value by updating the state. It is done using the onChange attribute and the handleChange function, called every time the input value changes. This happens when a new character is added or removed.

If we didn’t call setReminder in the handleChange function, then the input’s value would never change. It would appear as if you couldn’t type in the input!

Finally, the value we keep in the reminder state is displayed on the screen as today’s reminder.

(We could have also transformed the string before we set it with setReminder, by calling toUpperCase() on the string.)

Let’s have a look at a more complex example. Here we will build a form for users to create a personal account. Make sure to select CreateAccountForm.js in the menu to you’re looking at the right part of the code.

We now have three different inputs named username, email and password. There is a corresponding state variable and change handler function for each value.

🧼 Inlining event handlers

We could make our code a bit shorter if we inlined our event handlers:

🧺 Centralising event handlers

Sometimes we need to put all of our update logic in one function. Maybe we need to validate the user’s input before we set it in state.

We can use a single handleChange function, that is reused to keep track of changes for all of the form fields. To be able to tell which <input> is being updated, we check the event.target.name field. This corresponds to the name attribute on the <input> (e.g. <input name="username">).

Based on this value, we then decide which state to update: