Get an overview of lists.
- [Instructor] Okay so one of the best performance tools…we can use to measure whether or not we have any…wasted renderings happening in our react app,…is called react-addons-perf.…So to use this react-addons-perf,…we're going to make sure that we go into our terminal,…and we're going to do…yarn add react-addons-perf.…And remember if you are using MPM,…you can say mpm install--s react-addons-perf.…
And don't worry about this warning,…this won't actually affect the way things run.…And then we're also going to add…something called uuid.…So this stands for universally unique ID,…and this is a library that's going to allow…us to generate unique IDs.…Because later on we're going to see how react…likes to see special ID keys on each array of components,…so that it can speed up its diffing process…and make sure that it's not doing unnecessary renders.…So we're going to be using this later,…so we'll add this.…
I'm doing yarn add uuid,…you could also do mpm install uuid--s.…Okay so now that we have these two dependencies installed,…
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
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.