A snippet for creating a react class component

React-Create-Class-Snippet

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class $ComponentName$ extends Component {
    static propTypes = {
    // myProp: PropTypes.string.isRequired 
    };
    static defaultProps = {};
    
    constructor(props) {
        super(props);
        this.state = {};
    }
    
    // Rarely used
    static getDerivedStateFromProps(props, state){
        /* An advanced method and should be used sparingly. 
        * This method doesn't have access to the component instance. 
        *  This method fires on every render regarless of cause. In contrast to UNSAFE_componentWillReceiveProps, which only
        *  fies when the parent causes a re-render and not as a result of a loca setState.
        */
    }

    UNSAFE_componentWillMount() {
        // considered a legacy method will not work without the UNSAFE_ once version 17 is released
    }

    UNSAFE_componentWillReceiveProps(nextProps) {
        /* considered a legacy method will not work without the UNSAFE_ once version 17 is released
        * To perform a side effect in reponse to change in props use componentDidUpdate lifecycle
        * If you used componentWillReceiveProps for re-computing some data only when a prop changes, 
        * use a memoization helper instead (see React docs).
        */ 
    }

    UNSAFE_componentWillUpdate(nextProps, nextState) {
        /* considered a legacy method will not work without the UNSAFE_ once version 17 is released
        * NO setSTATE
        * Will not be invoked if shouldComponentUpdate() returns false.
        * Use this as an opportunity to perform preparation before an update occurs. 
        * This method is not called for the initial render.
        * Typically this method can be replaced by componentDidUpdate().
        */
    }
    
    componentDidMount() {
        /* componentDidMount() is invoked immediately after a component is mounted (inserted into the tree). 
        * Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, 
        * this is a good place to instantiate the network request.
        */ 
    }

    // Rarely used
    shouldComponentUpdate(nextProps, nextState) {
        /* shouldComponentUpdate() is invoked before rendering when new props or state are being received. 
        * Defaults to true. This method is not called for the initial render or when forceUpdate() is used.
        * This method only exists as a performance optimization. Do not rely on it to “prevent” a rendering, 
        * as this can lead to bugs. Consider using the built-in PureComponent instead of writing 
        * shouldComponentUpdate() by hand. PureComponent performs a shallow comparison of props and state, 
        * and reduces the chance that you’ll skip a necessary update.
        */
        
    }
    
    // Rarely used
    getSnapshotBeforeUpdate(){
        /* This is invoked right before the most recently rendered output is committed to e.g. the DOM. 
        * It enables your component to capture some information from the DOM (e.g. scroll position) before 
        * it is potentially changed. Any value returned by this lifecycle will be passed as a parameter to componentDidUpdate().
        */
    }

    componentDidUpdate(nextProps, nextState) {
        
    }
    
    componentWillUnmount() {
        /* NO setSTATE
        * Perform any necessary cleanup in this method, such as invalidating timers, 
        * canceling network requests, or cleaning up any subscriptions that were created in componentDidMount().
        */
    }

    render() {
        return (
            <div>
            </div>
        );
    }
}


export default $ComponentName$;