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.