Understand the React Component Lifecycle Methods

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!

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

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?

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.

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?

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

What code editor is using?