react mounting lifecycle methods

At the most basic level, a React component describes what to render by using the render() method. However, there are other methods that can be called throughout different moments of a component’s life. These lifecycle methods allow components to adapt to user interactions or updates throughout the application. The lifecycle methods can be called at different times in the component’s lifecycle and can be split into three categories: mounting, updating, and unmounting.

Mounting describes the process of when a component is initially created and inserted into the DOM. The component figures out its initial state and renders its initial HTML onto the page. This is when mounting lifecycle methods get called. There are three mounting lifecycle methods:

• componentWillMount()
• render()
• componentDidMount()

If applicable, these three methods get called, in order, when a component mounts. The componentWillMount() method gets called right after the HTML from render has finished loading. It is only called once, and is used for setting initial state based on props.

Like what was stated at the start of the post, the only required method for a React component to be valid is the render() method. This describes what the HTML for the component looks like and inserts it into the DOM.

The componentDidMount() method is called, a single time, after the render() method. The DOM can be accessed, and this method can be used to create new DOM elements or setting up asynchronous functions.