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
React 16 lets you decide if state gets updated via setState to prevent unnecessary re-renders. In your events, you can check if the new value of state is the same as the existing one. If the values are the same, you can return null and it won’t re-render a component.
React 16 let's you decide
if state gets updated via
0:00
the setState to prevent
unnecessary DOM updates.
0:03
In your events you can check
if the new value of state is
0:07
the same as the existing one.
0:10
If the values are the same, you can return
null, and it won't re-render a component.
0:11
For example,
0:16
in this simple app, clicking one of the
buttons loads a teacher's name and image.
0:17
The app component has a teacher state, and
0:23
a method that handles
updating the teacher state.
0:26
The updateTeacher method is called here,
and the button element's onClick event.
0:29
And the teacher state is being passed
down to the Teacher Component.
0:34
The Teacher Component has
a loading state that when true
0:37
renders the spinner loading gif.
0:41
For this example, setTimeout is called and
the componentWillReceiveProps lifecycle
0:44
method to set the loading state
to true for 500 milliseconds.
0:48
So this displays the loading gif for
0:52
half a second each time
the Teacher Component's props get updated
0:55
with the new teacher state, then it
renders the teacher name and image.
0:59
Now the issue with this is that
the teacher state gets updated and
1:03
triggers a re-render of the teacher
component no matter what,
1:07
even if the state doesn't actually change.
1:11
For example,
each time I click the Jay button,
1:13
we see the app unnecessarily
re-render Jay's name and image.
1:17
So React 16 provides state
performance improvements
1:22
that let you prevent an update from
being triggered by returning null for
1:26
setState if the new value of state
is the same as the existing value.
1:30
So first, in the updateTeacher method,
I'll create a constant
1:35
called newTeacher, and assign it
the value being passed in for teacher.
1:41
Since we're going to be checking and
setting state based on a previous state,
1:48
instead of passing setState and object,
1:53
I'll pass it a function that takes
the previous state as a parameter.
1:56
Then I'll check if the new
value of the teacher
2:03
state is the same as
the existing one with if
2:08
(state.teacher=== new teacher).
2:14
If the values are the same,
setState will return null.
2:19
Else, if the values are different,
setState will return the updated teachers
2:29
state, which will trigger a re-render of
the Teacher Component with the new state.
2:34
All right, let's try it out.
2:42
Clicking a button still loads its
respective teacher name and image.
2:44
However, if I click the button again, for
2:50
the same teacher, React does not
re-render the teacher component.
2:53
Because setState is returning null,
2:57
there is no state change
to trigger an update, good.
3:00
Preventing unnecessary state updates and
3:03
re-renders with null can make
your app perform faster.
3:05
So congrats, you're now up to speed with
the most important updates to React 16.
3:09
Now there are a few other features
I didn't cover, like support for
3:14
a custom DOM attributes and
improved server-side rendering.
3:17
You can learn all about this by
checking out the links I posted in
3:20
the teacher's notes.
3:23
And as with many popular
development tools,
3:24
React is going to be updated frequently.
3:26
So be sure to check the teacher's
notes for up-to-date information and
3:29
links to more Treehouse courses and
workshops about React.
3:32
Thanks everyone, and happy coding.
3:35
You need to sign up for Treehouse in order to download course files.
Sign up