React Hooks Tutorial - 4 - React Life Cycle (OLD)

In this lecture we are going to explain different life cycle which is commonly used in class component

Mounting: Mounting is the stage of rendering the JSX returned by the render method itself.
Updating: Updating is the stage when the state of a component is updated and the application is repainted.
Unmounting: As the name suggests unmounting is the final step of the component lifecycle where the component is removed from the page.

Constructor

The constructor for a React component is called before it is mounted. When implementing the constructor for a React.Component subclass, you should call super(props) before any other statement. Otherwise, this.props will be undefined in the constructor, which can lead to bugs.

Render

Rendering does all the work. It returns the JSX of your actual component. When working with React, you’ll spend most of your time here.
Most Common Use Case For Render: Returning component JSX.

ComponentDidMount

After we’ve rendered our component for the first time, this method is called.

ComponentDidUpdate

componentDidUpdate() is invoked immediately after updating occurs. This method is not called for the initial render.Use this as an opportunity to operate on the DOM when the component has been updated. This is also a good place to do network requests as long as you compare the current props to previous props

ShouldComponentUpdate

Use shouldComponentUpdate() to let React know if a component’s output is not affected by the current change in state or props. The default behavior is to re-render on every state change, and in the vast majority of cases you should rely on the default behavior. 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.

ComponentWillUnmount

componentWillUnmount() is invoked immediately before a component is unmounted and destroyed. Perform any necessary cleanup in this method, such as invalidating timers, canceling network requests, or cleaning up any subscriptions that were created in componentDidMount().You should not call setState() in componentWillUnmount() because the component will never be re-rendered. Once a component instance is unmounted, it will never be mounted again.


#jasacadamy #reactjs #lifecycle #reacthooks #js