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.