Returning null from setState3:37 with Guil Hernandez
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