Understand the use of DisplayName.
- [Instructor] In this video,…we're going to talk about displayName.…Now, displayName isn't technically…a part of the React lifecycle method,…but it is a part of the React component API,…and it's a static method…that's going to give us some developer functionality,…and it's especially useful when we'll be debugging…using a perf library that I'll show later,…and it's also useful when we're using…the React dev console tools.…So once again,…this is something that your user is not going to be aware of,…but when you're building a site…and when you're trying to improve it,…it can make it a lot easier to understand…what's happening to what component.…
So I'm here in my index.js file,…and I have the logger commented out,…and the app is set to comment in.…And so if I go to the web browser,…I can see that we still have our hello component,…and it's wrapped in our blue higher order component.…We're actually just going to get rid of both of those.…So let's go to our app.js file,…and we can get rid of our test wrapper.…That was just to look at how highered our components were.…
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.