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
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.
Check your understanding
Q: What is the purpose of the useEffect hook in React?
A: It's used for handling side effects in components, like synchronising with external systems.
Q: What's the difference between effects and events in React?
A: Effects handle side effects after a component renders, while events handle user interactions within a component.
Use Effects Sparingly
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
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
Based on this value, we then decide which state to update:
Check your understanding
Q: What is the difference between controlled and uncontrolled components in React?A: Controlled components are components that are controlled by React, whereas uncontrolled components are controlled by the DOM.
Q: What is the difference between declarative and imperative programming in React?A: Declarative programming in React involves describing the UI state, whereas imperative programming involves directly manipulating the DOM.
Almost all professional development involves people with different skills working together to deliver the things their customers want: designers, developers, testers, and so on. How they manage their work together impacts how quickly and effectively they deliver. This exercise explores the importance of ideas like prioritising your backlog, limiting the number of tasks that the team – or parts of a team – does, and reassigning people to work on different types of work to improve workflow.
Notes: Work-in-progress, or WIP, refers to the amount of work in a process that has been started but not completely delivered. This can include both tasks that are actively being worked on, as well as tasks that are waiting in a queue somewhere for the next person to pick up.
🎯 Goal: Manage a simulated team to deliver as much value as possible to your customer in 4 sprints of 10 working days each. (50 minutes)
Go to https://agilegame.octigo.pl/main and read the rules of the simulation.
When ready to start, click on 2. Play Simulation.
Remember that you can pause the game by toggling the Stop control. This is useful when you want to re-prioritize your backlog, move tasks between different subteams, or move team members between different subteams.
You can also use the Speed control to slow down or speed up the simulation.
After 40 simulated days, view your scores. What was the value of the work your team delivered? Consider these questions:
- In what ways did you notice limiting the amount of work-in-progress impact the effectiveness of the subteams?
- How did you prioritize the work your team started on?
- Did you move people between subteams to help when one subteam was overloaded and if so, why did this help?
Do you think you could improve your score? If you want to, you can click 4. Play again to try and improve your results
Post one thing you found most challenging and one thing that was the most fun on your cohort’s CYF Slack channel.
Many development teams adopt this saying:
“Stop starting and start finishing!”
Assign teams for Design-A-Snack game
🎯 Goal: Assign people to teams for the Design-A-Snack game (10 minutes)
- Only ONE person needs to do this prep. Assign people in your cohort into smaller teams of 3-5 people each. If nobody else has announced they are going to do this, send a message on your Slack channel saying you will do it. They will surely treat you as the hero that you are and buy you doughnuts.
- Copy this template spreadsheet and fill in the names of you and your colleagues to create an even number of teams of 3-5 people each. Decide who will be the facilitator who will tell people when to move on to the next part of the game.
- Post the spreadsheet on your Slack channel so everyone knows which team they are in.