Optimize Performance with PureComponent4:06 with Guil Hernandez
React provides a special type of component, called
PureComponent, that helps prevent unnecessary re-renders. If your component’s
render() method renders the same result given the same props and state, you can use
PureComponent for a performance boost in some cases.
[MUSIC] 0:00 [SOUND] Hi there, in this stage I will teach you a few useful patterns 0:04 that you can use in your React components. 0:07 These patterns will not only help prevent you from writing messy and 0:10 overcomplicated code, but also help you create flexible more performant components 0:13 that are easier to understand and maintain. 0:17 You'll learn how to destructure and validate props, access DOM nodes directly 0:19 with refs, then you'll get an opportunity to practice much of what you've learned so 0:23 far about React. 0:27 So first, let's have a look at the benefits of PureComponents in React. 0:28 In the file file, Player.js, I'll console.log the name of a player, 0:32 with props.name, and the message, rendered. 0:38 When the app loads, we see that our four players are rendered, and 0:42 that's expected, but notice what happens each time I update a player's score. 0:46 React rerenders every player component on the board. 0:51 So why did React rerender Guil, James, and Treasure when only Ashley's score change? 0:55 Usually when a component detects a change in its props, React will 1:00 update the parts of UI that need to change as a result of the change in props. 1:04 For example, each time the handleScoreChange function is executed, 1:09 the score state of a player gets updated, the update and 1:14 state gets passed to the Player component via props. 1:17 And that triggers the Player component to rerender and 1:21 display the updated score on the screen. 1:24 Well, sometimes a component's props don't change at all, but 1:26 React still triggers a rerender. 1:30 And that's what's happening with our Player component. 1:32 React rerenders every Player, including its counter, 1:34 every time a Player state or props changes. 1:38 This is sometimes called a wasted render. 1:41 So React provides a special type of component, 1:45 called a PureComponent, that helps you prevent unnecessary rerenders like this. 1:47 If your component renders the same result, given the same props and 1:52 state, you can use PureComponent for a performance boost, in some cases. 1:55 So we're going to change our Player component to a PureComponent. 1:59 And you define a PureComponent as a class that extends PureComponent, from React. 2:02 So let's first change the import statement to import React and 2:07 PureComponent from React. 2:12 Then change the function to a class with, 2:14 class Player extends PureComponent. 2:19 Next, we'll add the render method inside the class. 2:23 Place the return statement with the JSX and console.log inside the render method. 2:27 Now let's not forget to change props to this.props. 2:35 I'll press Shift+Cmd+L on my keyboard to select all occurrences of props and 2:39 change them to this.props, all at once. 2:45 So PureComponent is a more performant version of component, and 2:49 it's another way you might see classes written in React. 2:53 PureComponent implements a lifecycle method behind the scenes called 2:57 shouldComponentUpdate that runs a shallow comparison of props and state. 3:01 The lifecycle method automatically checks whether a rerender is required for 3:05 the component and calls render only if it detects changes in state or props. 3:09 Now let's have a look in the console. 3:15 We see that all players render when the app loads. 3:16 However, updating Guil score logs that only Guil rendered. 3:19 Update Treasure's score and we see that just Treasure rendered, and so forth. 3:24 So now we're preventing the unnecessary rerendering of a player by rerendering 3:29 a Player component instance only when a change in its props is detected. 3:34 Now in some cases, wasted renders like earlier are not a problem. 3:39 In a small app like ours, 3:43 with just a handful of players, rerenders are not going to affect performance. 3:45 Use PureComponent when you have performance issues and 3:50 have determined that a specific component is rerendering too often. 3:53 It gives you the chance to skip rerendering when the component state or 3:57 props haven't changed. 4:01 I've posted more resources about PureComponent in the teacher's notes with 4:02 this video. 4:06
You need to sign up for Treehouse in order to download course files.Sign up