The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Understand the React Component Lifecycle Methods

Understand the React Component Lifecycle Methods

4:19
React components have a lifecycle, and you are able to access specific phases of that lifecycle. This lesson gives an overview of the entire component lifecycle and demonstrates mounting and unmounting of your React components.
Watch this lesson now
Avatar
egghead.io

React components have a lifecycle, and you are able to access specific phases of that lifecycle. This lesson will introduce mounting and unmounting of your React components.

Avatar
Joris

Great overview of mount and unmount. However, after watching previous videos I don't understand the use of props here. Since val gets updated, shouldn't it be state? When do you use props vs state? Thanks!

Avatar
Joseph

In this case setProps and setState are interchangeable since there is only one component representing the entire example. This is seldom the case in a real world application. There are tests (http://jsperf.com/reactjs-setstate-vs-setprops ) that present setState as the faster option.

It is best to think of props as options or configuration that are sent to your component and state as internal or private variables. The ideal situation is to only have state in the Owner of a group of components. See: http://facebook.github.io/react/blog/2013/11/05/thinking-in-react.html

In reply to Joris
Avatar
Ashlyn Baum

I'm a bit confused about how the component's methods componentWillMount, componentDidMount, and componentWillUnmount are initially fired when loading the page. Are all the methods in the class automatically called synchronously on load?

Avatar
Joseph

These specific methods are inherited from React.Component and executed automatically.
componentWillMount then render then componentDidMount.
componentWillMount and componentDidMount will never be called again.
componentWillUnmount is executed when the component is removed from the DOM.
Adding the component back to the DOM will restart the mounting lifecycle phases.

In reply to Ashlyn Baum
Avatar
Anett_Soos

I used {this.mount} instead of {this.mount.bind(this)} as an event on the Wrapper button. It still worked. Should I be using 'bind'?

In reply to egghead.io
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?