Understand the React Component Lifecycle Methods

InstructorJoe Maddalone

Share this video with your friends

Send Tweet

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.

Joris
~ 6 years ago

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!

Joe Maddaloneinstructor
~ 6 years ago

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

Ashlyn Baum
~ 5 years ago

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?

Joe Maddaloneinstructor
~ 5 years ago

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.

Robinson Rodriguez
~ 4 years ago

The only component we are explicitly rendering is App in index.js I don't understand why does just export default Wrapper make the wrapper render?

Lokesh Sanapalli
~ 2 years ago

@Robinson, Yes we have to change <App> to <Wrapper> in index.js may be he missed that part

wahid
~ 2 years ago

What code editor is using?