React Component LifeCycle && React Router

React Component Lifecycle Hooks

• Faster than having a bunch of event listeners
• Allows us to hook into our component during crucial phases
• Easier to think about/debug our components with lifecycle hooks

Rendering should be pure

componentWillMount

• Invoked just before rendering
• Changing state will not trigger a re-render
• Use this to change state before rendering

componentDidMount

• Invoked once, immediately after the initial rendering occurs
• DOM has been rendered - use this to access the DOM.
• Child components will be invoked before parent componenents

componentWillReceiveProps

• Invoked when a component is receiving new props
• This method is not called for the initial render
• React to prop transitions before rendering occurs here.
• Changing state within this function will not trigger a re-render.

shouldComponentUpdate

• Invoked before rendering when new props or state are being received.
• This method is not called for the initial render.
• Return false to skip rendering
• Can speed performance by skipping unnecessary rendering.

componentWillUnmount

• Invoked just before a component unmounts from the DOM
• Perform any cleanup necessary in this method, such as timers or dom elements created by componentDidMount

Initialization

• GetDefaultProps
• ComponentWillMount
• Render
• ComponentDidMount

State Changes

• ShouldComponentUpdate
• ComponentWillUpdate
• Render
• ComponentDidUpdate

Props Changes

• ComponentWillReceiveProps
• ShouldComponentUpdate
• ComponentWillUpdate
• Render
• ComponentDidUpdate

Unmounting

• ComponentWillUnmount

PropTypes

Make sure components are being used correctly

PropTypes:

• array
• bool
• func
• number
• object
• string
• isRequired

Default Props