Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
This stage we'll build the stopwatch component! We'll cover working with React's useEffect hook and learn to use conditional rendering to update your UI based on the current state.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
In the previous stage, we added two
new components to our Scoreboard app,
0:04
the Stats component and
the AddPlayerForm component.
0:09
We passed the player state down
to the Stats component, but
0:13
before we could display
the total number of players,
0:17
and the total score,
we needed to calculate their values.
0:20
We used the player's array and
0:25
the reduce method to calculate the total
number of players and the total score.
0:27
After working on the Stats component,
we created our first controlled component.
0:33
As you may recall, a controlled component
is a component that renders a form
0:39
element whose value is
controlled by React.
0:44
Our AddPlayerForm component renders
a form element that allows users to
0:48
add a new player to the scoreboard.
0:53
AddPlayerForm is a controlled component
because a value entered in the text
0:57
field is controlled by React through
a state that we named value.
1:02
We used the state hook to add
value to the AddPlayerForm,
1:07
and learned that when working with hooks,
1:11
you'll often use a named import to
input hooks at the top of the file.
1:14
To relay the new players name back
up to the main App component,
1:19
we created an event handler in App.js and
1:24
passed the event handler down to
the AddPlayerForm component.
1:27
The event handler is a function that
takes, as a parameter, the value state.
1:32
It then uses the spread operator to
add a new player to the player state
1:37
without modifying the original players.
1:42
In this stage, we're gonna build
a stopwatch into our Scoreboard app.
1:45
It will be a stateful component
that counts in seconds and
1:49
allows users to start,
stop, and reset the time,
1:54
which could be useful in games for
limiting players time length.
1:57
We'll create a button to start and
stop the timer.
2:04
If the time is stopped and started again,
2:08
it should continue counting
from where it left off.
2:11
Hitting the reset button should
return the timer to zero.
2:15
We'll start by building the stopwatch
component and its elements.
2:19
The first bit of functionality we'll
implement is the start and stop button.
2:24
The button will display start when
the stopwatch isn't running, and
2:29
stop when it is.
2:33
We'll use a ternary operator to
conditionally render the button's name
2:35
based on the state.
2:40
So we'll create a state that equals
true when the stopwatch is running and
2:41
false when it's not.
2:46
Lastly, we'll tackle
the functionality of the stopwatch.
2:49
In React, there are times we want
some side effects to happen after our
2:53
component has rendered.
2:57
Fetching data from an API,
manually changing the DOM, and
2:59
setting up a timer are all
examples of side effects.
3:03
React provides a mechanism called effect
hook that lets you execute an arbitrary
3:08
function, which it calls side effect
inside your function components.
3:14
In our Scoreboard app, the side effect
will be the stopwatch functionality.
3:20
When the user clicks the start button,
3:26
the effect hook will run our side
effect that will create a timer
3:28
to continuously add the value one
to our stopwatch time every second.
3:32
And when the user clicks the stop button,
the effect hook will pause the timer.
3:38
Often side effects create resources
such as a subscription, or
3:43
a timer ID that need to be cleaned
up before the next effect is called,
3:47
or when the component leaves the screen.
3:52
Cleaning up these resources helps
prevent memory leaks that can
3:55
negatively impact performance.
4:00
The effect hook can be
intimidating at first, but
4:02
don't worry I'll break it down and
walk you through the whole process.
4:05
Let's get started.
4:09
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up