These are the functions that will be, or can be, included in your specification object when you’re creating a component. Part of these specification functions are lifecycle functions, which when encountered, will show the details as to when they execute during the life of a component.

Function invocation order during the initial render of a React component

Component lifecycle that happens when the state changes on a component

Lifecycle of a component when it has altered props

render

Every React component must have a render function. This render function will accept a ReactElement and provide a container location where the component will be added or mounted to the DOM.

getInitialState

This function will return an object. The contents of this object will set the state of the component when it initially renders. This function is invoked one time, just before the component renders. When creating a component using ES6 classes, you will actually be setting the state, via this.state, within the constructor function of the class.

getDefaultProps

When a ReactClass is first created, getDefaultProps is invoked one time and then is cached. This function returns an object that will represent the default state of this.props on the component. Values for this.props that do not exist in the parent component, but are present in the component’s mapping, will be added to this.props here. When you’re creating a component using the ES6 setting, the default props is done within the constructor function of your component class.

Mixins

A mixin in the component specification is an array. A mixin can share the lifecycle events of your component and you can be assured that the functionality will execute during the proper time during the component’s lifecycle. An example mixin is a timer control that merges the lifecycle events of a SetIntervalMixin with the main component called TickTock.

Example of Mixin in jsfiddle

displayName

displayName is a property that is used when you see debugging messages from your React app.

componentWillMount

componentWillMount is a lifecycle event that React uses during the process of taking your component class and rendering it to your DOM. The componentWillMount method is executed once before the initial render of your component. The unique thing about componentWillMount is that if you call your setState function within this function, it will not cause a re-render of your component because the initial render method will receive the modified state.

componentWillMount()

componentDidMount

componentDidMount is a function that’s invoked only on the client side of React processing, after the component has been rendered to the DOM. At this point, the React component has become a part of the DOM and you can access it using the React.findDOMNode function.

componentDidMount()

componentWillReceiveProps

componentWillReceiveProps is executed when the component will be receiving props. This function is invoked every time that there is a prop change, but never on the first render. You can call setState inside this function and you will not cause an additional render. The function that you provide will have an argument for the next props object that is going to become part of the component’s props. Within this function though you still have access to the current props using this.props so you can make any logic comparisons between this.props and nextProps in this function.

componentWillReceiveProps( nextProps )

shouldComponentUpdate

This function is invoked before a component renders and each time a change in prop or state is received. It will not be called before the initial render, or when forceUpdate is utilized. This function is a mechanism that you can use to skip rendering if you know that the changes to the props or state will not actually require the component to update. To short-circuit the render process, you need to return false in the function body, based on whatever criteria you determine. Doing this will bypass the rendering of the component, by not only skipping the render() function but also the next steps in the lifecycle — componentWillUpdate and componentDidUpdate

shouldComponentUpdate( nextProps, nextState );

componentWillUpdate

componentWillUpdate is invoked right before a render occurs on your component. You cannot use setState in this function.

componentWillUpdate( nextProps, nextState )

componentDidUpdate

componentDidUpdate is executed just after all the rendering updates are processed into the DOM. Since this is based on an update, it is not part of the initial render of the component. The arguments available to this function are the previous props and previous state.

componentDidUpdate( prevProps, prevState );

componentWillUnmount

When a component is rendered to the DOM, it is called mounting. It follows then that this function componentWillUnmount would be invoked immediately before the component is no longer going to be mounted to the DOM.

componentWillUnmount()