Understand the syntax and applications of componentDidMount.
- [Narrator] In this video, we're going to…be talking about componentDidMount,…and we're going to be adding componentDidMount to our logger.…When we call componentDidMount,…it means that our HTML elements…have now been officially rendered to the page,…and we may access them.…This means that we can use refs for particular elements,…and we can also make calls to setState.…This is also a great place for us…to make an external call to an API…if the result of that call will end with a state change.…ComponentDidMount is a great chance…to make a call to a remote API,…so I said componentWillMount and render,…maybe not the best cases,…but componentDidMount,…this is a good opportunity to do that.…
So, let's make a just kind of dummy function…that will pretend to fetch data from a remote API.…It's just going to start by console logging,…"We're going to fetch data,"…and then we're just going to use a timeout, with setTimeout,…to simulate an asynchronous request.…So, we're going to say console.log, data retrieved,…and then we're going to call setState 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.