Understand the syntax and applications of render.
- [Instructor] So unlike componentWillMount,…which is perhaps the least used…of the React lifecycle methods,…render is definitely the most used.…It's probably the most iconic.…When you think of a React component,…you think of that render statement…that then has the JSX/HTML elements in it…that represent what you're actually…going to put onto the page.…One thing that's important to know about render…is that you cannot make any untriggered calls…to set state in your render function.…So let's go here to app.js,…and I decided that right here,…I'm going to delete what's on line nine.…
If I decided that I wanted to say, okay,…when you render, call this.setState…and make newThing equal to some string.…If I wanted to do that,…that is not a good idea.…It's not just not a good idea.…You can't do it.…It'll crash your app,…because it's going to create an infinite chain…of setting state and re-rendering,…setting state and re-rendering.…Because a re-render will occur…whenever there's a change to state…or there's a change to props.…
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.