Learn the gotchas and applications of componentWillUpdate.
- [Instructor] In this video we're going to be…talking about componentWillUpdate.…ComponentWillUpdate is an opportunity to make any changes…to the DOM before the component is actually updated.…But we should note that you can't call…this.setState here.…It's a little bit like calling this.setState…inside of your actual render function.…If you call setState during componentWillUpdate,…you'll set up an infinite chain of updates…that will crash your app.…So we shouldn't do that.…So we're also going to make some changes to our application…that will just make it look a little bit nicer…and help us see what's going on.…
And then we're going to modify our logger…and we're going to make use of componentWillUpdate.…The first thing I'm going to do is I'm going to go into…my exercise files, and I'm going to go into the final project,…and then into the source,…and then I'm going to copy this styled.js,…and I'm going to bring it into the lifecycle-logger…project that I'm working on right now.…And I'm going to paste it in here.…
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.