Join Carl Peaslee for an in-depth discussion in this video Implementing shouldComponentUpdate, part of React: Lifecycles.
- [Instructor] Okay, so in our last video,…we set up our logger to note…every time we made a call to shouldComponentUpdate,…and when we did that,…we found out that our app was calling it…lots and lots of times.…So we want to minimize the number of times…that our component gets updated,…so that we can make our app more performant.…So let's go to our app,…and there are two different places…where we can put shouldComponentUpdate.…Before I do that, though, I'm going to add one other thing.…I'm going to stop logging for our app,…and then I'm also going to comment out line 127…and have our app stop logging,…so we're just going to log for our child.…
And then I'm also going to add a console.log here on 110,…and in it, I'm going to write PollChild rerendered.…Now I'm going to go back to our webpage,…and we're going to look and see how often PollChild rerenders.…Okay, we'll refresh our page…and we'll do Show PollChild.…And we can see that, pretty consistently,…every single second, if not more than once a second,…PollChild is rerendering.…
Carl Peaslee helps you build a number of small reusable components that will be useful in future projects. Along the way, he discusses the syntax and uses of lifecycle methods, how state affects React lifecycles and your apps, and how to set static display name, default props, and initial state. Plus, learn how to gather performance data and improve performance by minimizing component updates.
- Overview of React lifecycles
- Initial state
- Default props
- Mounting: componentWillMount, componentDidMount, and render
- Updating: shouldComponentUpdate, componentWillUpdate, and componentDidUpdate
- Controlling component updates
- Using react-addons-perf to get performance data
Skill Level Intermediate
Building a Web Interface with React.jswith Ray Villalobos1h 21m Intermediate
1. Overview of Lifecycles
2. Defaults, Initialization, and Construction
5. Optimizing Components
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.