Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed React Components!
You have completed React Components!
Preview
React provides a high order component, called a memo, that helps you prevent unnecessary re-renders like this. If your component renders the same result given the same props and state, you can use memo for a performance boost in some cases.
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
Let's have a look at
the benefits of React.memo.
0:00
In the file Player.js, all console.log,
0:04
the name of a player, and
the message rendered.
0:08
In the previous stage,
0:13
we added some console.log statements
to the Stopwatch.js file.
0:15
Let's delete them so we only see
the console.log we wrote in Player.js.
0:20
I'll also open up index.js and
uncomment the StrictMode tags.
0:28
When the app loads, we see that our four
players are rendered, and that's expected.
0:34
But notice what happens each
time I update a player score.
0:40
React re-renders every Player
component on the board.
0:45
Why did React re-render Guil, James,
0:50
and Treasure when only
Ashley's score changed?
0:53
In React, components re-render due
to any of these three reasons.
0:58
There's an update in the state,
an update in prop,
1:03
and re-rendering of the parent component.
1:07
For example, each time the
handleScoreChange function is executed,
1:10
the score state of
the player gets updated.
1:16
The update in the state gets passed
to the Player component via props.
1:19
That triggers the Player
component to re-render and
1:23
display the updated score on the screen.
1:27
Sometimes a component's prop
doesn't change at all, but
1:30
React still triggers a re-render.
1:35
That's what's happening
with our Player component.
1:37
The player state lives in
the main App component.
1:41
When the player state updates, that causes
React to re-render the main App component.
1:44
React then re-renders every
child component of the main app
1:50
regardless of whether their
prop has changed or not.
1:55
This is sometimes called a wasted render.
1:59
React provides a high order
component called memo that helps you
2:02
prevent unnecessary re-renders like this.
2:07
If your component renders the same
result given the same props and
2:10
state, you can use memo for
a performance boost in some cases.
2:15
We're going to wrap our Player
component with React.memo.
2:20
There are many different
ways to wrap your component.
2:25
I like to wrap it in
the export statement like so.
2:28
Similar to React hooks,
we can also use a named
2:32
import to import memo
at the top of the file.
2:36
Now, let's have a look in the console.
2:41
All players render when the app loads.
2:43
When we update Guil score, React still
re-renders every player component.
2:46
How come?
2:51
By default, memo does a shallow comparison
of props and the objects in props.
2:52
You can control the comparison by
providing a custom comparison function as
2:59
a second argument of memo.
3:04
In Player.js,
just above the export statement,
3:07
let's create a custom comparison function
and name it playerPropsAreEqual.
3:12
Our comparison function will
return true if the previous props
3:18
match the next props.
3:23
So we'll pass prevProps and
nextProps as a parameter.
3:25
The player component takes in six props,
name,
3:31
score, id, key, removePlayer,
and changeScore.
3:35
Since we don't provide a way for
the user to edit a player's name,
3:40
the only prop that changes
is the score prop.
3:45
In our comparison function,
we'll return the comparison
3:48
of prevProps.score to the nextProps.score.
3:54
Lastly, let's pass our comparison
function as the second
3:58
argument to memo and save our changes.
4:03
In the console, updating Guil score,
logs that only Guil rendered.
4:06
Update Treasure score and we see that
just Treasure rendered, and so forth.
4:11
Now we're preventing the unnecessary
re-rendering of a player by rendering
4:17
a player component instance only when
a change in its score prop is detected.
4:23
In some cases, wasted renders
like earlier are not a problem.
4:28
In a small app like ours with
just a handful of players,
4:33
re-renders are not going
to affect performance.
4:37
Use React.memo when you have
a performance issue and
4:41
have determined that a specific
component is re-rendering too often.
4:45
It gives you the chance to skip
re-rendering when a component state or
4:50
props haven't changed.
4:55
I've posted more resources about
React.memo in the teacher's notes below.
4:57
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