React component.js

import React, { Component } from 'react';

class MyComponent extends Component {
    constructor(props) {
        super();

        this.state = [{
            
        }]
    }
    
    componentWillMount() {
        // DO:
        // update state via this.setState
        // perform last minute optimization
        // cause side-effects (AJAX calls etc.) in case of server-side-rendering only

        // DON’T:
        // cause any side effects (AJAX calls etc.) on client side
    }
    
    componentWillReceiveProps(nextProps) {
        // DO:
        // sync state to props

        // DON’T:
        // cause any side effects (AJAX calls etc.)
    
        if(nextProps.myProp !== this.props.myProps) {
            // nextProps.myProp has a different value than our current prop
            // so we can perform some calculations based on the new value
        }
    }
    
    shouldComponentUpdate(nextProps, nextState, nextContext) {
        // DO:
        // use for increasing performance of poor performing Components

        // DON’T:
        // cause any side effects (AJAX calls etc.)
        // call this.setState
    }
    
    componentWillUpdate(nextProps, nextState) {
        // DO:
        // synchronize state to props

        // DON’T:
        // cause any side effects (AJAX calls etc.)
    }
    
    componentDidUpdate(prevProps, prevState, prevContext) {
        // DO:
        // cause side effects (AJAX calls etc.)

        // DON’T:
        // call this.setState as it will result in a re-render
    
        if(prevProps.myProps !== this.props.myProp) {
            // this.props.myProp has a different value
            // we can perform any operations that would 
            // need the new value and/or cause side-effects 
            // like AJAX calls with the new value - this.props.myProp
        }
    }
    
    componentDidCatch(errorString, errorInfo) {
        this.setState({
            error: errorString
        });
        
        ErrorLoggingTool.log(errorInfo);
    }

    componentDidMount() {
        // DO:
        // cause side effects (AJAX calls etc.)

        // DON’T:
        // call this.setState as it will result in a re-render
    }

    componentWillUnmount() {
        // DO:
        // remove any timers or listeners created in lifespan of the component

        // DON’T:
        // call this.setState, start new listeners or timers
    }



    render() {
        return (
            // Code
        )
    }
}

export default MyComponent;