What is the React component lifecycle?
When creating a component in React, a series of methods will be executed, these methods are known as lifecycle methods and allows you to effectively create, update and manage components in React.
Below outlines some of the key lifecycle methods that are execute when creating a new component in React.
1. constructor() The constructor() method is called to initialize the state of the component, here you define what the initial state will be, and pass in any props the component receives via the constructor function.
2. componentWillMount() This method is executed just before the initial render for the component, in this method you can execute actions just before the component is created including making Ajax requests to obtain data used in the initial state and executing server side code.
3. render() The render() method contains our JSX (JavaScript that looks like HTML) and creates our React element based off this JSX. Each component can only have a single render() function that requires all our JSX to be wrapped in a single element.
4. componentDidMount() This method tells us that are component was successfully mounted to the DOM. In this method we can interact with the DOM, manipulate the state of the component by calling this.setState() and perform Ajax requests. This method allows us to manipulate the component and perform tasks that would have caused side effect issues during creation of our component.