Part 40 React Tutorial | React Life cycle methods | Mounting |

Lifecycle of Components Each component in React has a lifecycle that you can monitor and manipulate during its three main phases. Below phases are available: 1. Mounting phase 2. Updating phase 3. Unmounting phase 4. Error handling phase 1. Mounting:- ------------ - Mounting means putting elements into the DOM. 1. constructor(props) - Whenever object is created, constructor will be executed. - This is the first method called during the creation of a component instance. - It is best places to do the initalization, setup the state variables. 2. static getDerivedStateFromProps(props, state) - This method is called before the initial render of a component, and any time new props are passed to the component. - It is used to update the component's state based on the props that were passed. 3. render() - This method is required for all React components. It is used to generate the HTML markup for the component based on its current props and state. 4. componentDidMount() - This method is called after the initial render of a component. It is used to perform any tasks that require access to the DOM, such as setting up event listeners or fetching data from a server. 2. Updating phase:- ---------- - A component is updated whenever there is a change in the component's state or props. 1. static getDerivedStateFromProps(nextProps, prevState) - Also at updates this method is called. This is the first method that is called when a component gets updated. - This method is called when new props are received by the component. It is used to update the component's state based on the new props. 2. shouldComponentUpdate(nextProps, nextState) - Returns a Boolean value that specifies whether React should continue with the rendering or not. - if it returns false then component will not be updated. Default value is true. - This method is called before a component is updated. It is used to determine whether the component should re-render or not, based on changes to its props or state. 3. render() - It is called when a component gets updated, it has to re-render the HTML to the DOM, with the new changes. 4. getSnapshotBeforeUpdate() - This method provides the previous state and property value. - If the getSnapshotBeforeUpdate() method is present, you should also include the componentDidUpdate() method, otherwise you will get an error. 5. componentDidUpdate(prevProps, prevState) - This method is called after the component is updated in the DOM. - It is used to perform any tasks that require access to the DOM or the component's state or props, such as updating a chart or triggering an animation. 3. Unmounting:- ----------- - When a component is removed from the DOM, or unmounting as React likes to call componentWillUnmount(). 1. componentWillUnmount() - The componentWillUnmount method is called when the component is about to be removed from the DOM. - It is used to clean up any resources that the component has acquired, such as event listeners or timers. 4. Error handling phase:- -------------------- 1. static getDerivedStateFromError(error):- - This method is called when a child component throws an error. It is used to update the state of the parent component based on the error. 2. componentDidCatch(error, info):- - This method is called after a child component throws an error. It is used to log the error or display an error message to the user.