Learn about using react-addons-perf.
- [Instructor] Okay so in this chapter,…we're going to focus on finding ways…to optimize our components.…In the last few chapters, we got a handle…on all the different life cycle methods,…and so in this video, we're going to specifically use some…of them to update our app, and then in the next few videos,…we're going to look at some tools that will help us…actually measure our improvements.…So let's think about how we use should component update…and component will on mount to update our child component.…And we're going to use some of those same techniques…to update our parent component.…
So now we're going to go to our parent component…and right away, I know that we have an interval…here in line 36 through line 43.…And on line 37, we're setting this.pollinterval,…equal to that interval, and I know when our component mounts…that here on line 29 we are going…to create that parent poll.…So I know from our previous experience…that whenever we mount something like an interval,…something that's going to be attached to the window…
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?
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.