1
00:00:00,590 --> 00:00:03,670
React 16 let's you decide
if state gets updated via

2
00:00:03,670 --> 00:00:07,290
the setState to prevent
unnecessary DOM updates.

3
00:00:07,290 --> 00:00:10,030
In your events you can check
if the new value of state is

4
00:00:10,030 --> 00:00:11,880
the same as the existing one.

5
00:00:11,880 --> 00:00:16,590
If the values are the same, you can return
null, and it won't re-render a component.

6
00:00:16,590 --> 00:00:17,470
For example,

7
00:00:17,470 --> 00:00:23,220
in this simple app, clicking one of the
buttons loads a teacher's name and image.

8
00:00:23,220 --> 00:00:26,170
The app component has a teacher state, and

9
00:00:26,170 --> 00:00:29,170
a method that handles
updating the teacher state.

10
00:00:29,170 --> 00:00:34,070
The updateTeacher method is called here,
and the button element's onClick event.

11
00:00:34,070 --> 00:00:37,800
And the teacher state is being passed
down to the Teacher Component.

12
00:00:37,800 --> 00:00:41,900
The Teacher Component has
a loading state that when true

13
00:00:41,900 --> 00:00:44,030
renders the spinner loading gif.

14
00:00:44,030 --> 00:00:48,816
For this example, setTimeout is called and
the componentWillReceiveProps lifecycle

15
00:00:48,816 --> 00:00:52,720
method to set the loading state
to true for 500 milliseconds.

16
00:00:52,720 --> 00:00:55,370
So this displays the loading gif for

17
00:00:55,370 --> 00:00:59,320
half a second each time
the Teacher Component's props get updated

18
00:00:59,320 --> 00:01:03,540
with the new teacher state, then it
renders the teacher name and image.

19
00:01:03,540 --> 00:01:07,750
Now the issue with this is that
the teacher state gets updated and

20
00:01:07,750 --> 00:01:11,380
triggers a re-render of the teacher
component no matter what,

21
00:01:11,380 --> 00:01:13,740
even if the state doesn't actually change.

22
00:01:13,740 --> 00:01:17,120
For example,
each time I click the Jay button,

23
00:01:17,120 --> 00:01:20,690
we see the app unnecessarily
re-render Jay's name and image.

24
00:01:22,390 --> 00:01:26,000
So React 16 provides state
performance improvements

25
00:01:26,000 --> 00:01:30,391
that let you prevent an update from
being triggered by returning null for

26
00:01:30,391 --> 00:01:35,130
setState if the new value of state
is the same as the existing value.

27
00:01:35,130 --> 00:01:41,440
So first, in the updateTeacher method,
I'll create a constant

28
00:01:41,440 --> 00:01:46,230
called newTeacher, and assign it
the value being passed in for teacher.

29
00:01:48,370 --> 00:01:53,530
Since we're going to be checking and
setting state based on a previous state,

30
00:01:53,530 --> 00:01:56,267
instead of passing setState and object,

31
00:01:56,267 --> 00:02:00,898
I'll pass it a function that takes
the previous state as a parameter.

32
00:02:03,464 --> 00:02:08,988
Then I'll check if the new
value of the teacher

33
00:02:08,988 --> 00:02:14,088
state is the same as
the existing one with if

34
00:02:14,088 --> 00:02:19,210
(state.teacher=== new teacher).

35
00:02:19,210 --> 00:02:24,328
If the values are the same,
setState will return null.

36
00:02:29,448 --> 00:02:34,118
Else, if the values are different,
setState will return the updated teachers

37
00:02:34,118 --> 00:02:39,154
state, which will trigger a re-render of
the Teacher Component with the new state.

38
00:02:42,184 --> 00:02:43,220
All right, let's try it out.

39
00:02:44,770 --> 00:02:50,910
Clicking a button still loads its
respective teacher name and image.

40
00:02:50,910 --> 00:02:53,830
However, if I click the button again, for

41
00:02:53,830 --> 00:02:57,982
the same teacher, React does not
re-render the teacher component.

42
00:02:57,982 --> 00:03:00,160
Because setState is returning null,

43
00:03:00,160 --> 00:03:03,680
there is no state change
to trigger an update, good.

44
00:03:03,680 --> 00:03:05,748
Preventing unnecessary state updates and

45
00:03:05,748 --> 00:03:09,560
re-renders with null can make
your app perform faster.

46
00:03:09,560 --> 00:03:14,050
So congrats, you're now up to speed with
the most important updates to React 16.

47
00:03:14,050 --> 00:03:17,650
Now there are a few other features
I didn't cover, like support for

48
00:03:17,650 --> 00:03:20,750
a custom DOM attributes and
improved server-side rendering.

49
00:03:20,750 --> 00:03:23,270
You can learn all about this by
checking out the links I posted in

50
00:03:23,270 --> 00:03:24,380
the teacher's notes.

51
00:03:24,380 --> 00:03:26,920
And as with many popular
development tools,

52
00:03:26,920 --> 00:03:29,300
React is going to be updated frequently.

53
00:03:29,300 --> 00:03:32,330
So be sure to check the teacher's
notes for up-to-date information and

54
00:03:32,330 --> 00:03:35,320
links to more Treehouse courses and
workshops about React.

55
00:03:35,320 --> 00:03:36,670
Thanks everyone, and happy coding.