Reactjs Component Lifecycle

React Class Component lifecycle can be broken down into 3 phases:

• Mounting: When Component is being inserted into the DOM for the first time.
  Constructor → getDerivedStateFromProps → render → componentDidMount
• Updating: Occurs when a component props or state changes, triggering a re-render.
  getDerivedStateFromProps → shouldComponentUpdate → render → getSnapshotBeforeUpdate → componentDidUpdate
• Unmounting: When component is being removed from the DOM. componentWillUnmount

Mounting Phase

• constructor(props): This is called before the component is mounted, and it's used to initialize state or bind methods.
• static getDerivedStateFromProps(nextProps, nextState): This is called right before rendering when the component receives new props. It allows you to update the state based on changes in props. It returns an object to update the state, or null if no state update is needed.
• render(): This method is required in class components. It returns the JSX that represents the component’s UI.
• componentDidMount(): This is called after the component has been mounted (i.e., inserted into the DOM). It’s commonly used for operations like fetching data or setting up subscriptions.

Updating Phase

• static getDerivedStateFromProps(nextProps, nextState): Called during every re-render, before the render method is called.
• shouldComponentUpdate(nextProps, nextState): This method allows you to control whether a re-render is necessary. By default, React re-renders when state or props change. However, you can use this method to return false to skip the re-render, optimizing performance.
• render(): This method is called again during the update to re-render the component’s UI.
• getSnapshotBeforeUpdate(prevProps, prevState): This is called right before changes from the virtual DOM are applied to the real DOM. It allows you to capture information (like scroll position) before the update.
• componentDidUpdate(prevProps, prevState, snapshot): This method is called after the component has updated (i.e., after the render method has completed). It’s useful for performing actions based on prop or state changes, like making network requests.

UnMounting Phase

Get Sudha Priya’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

componentWillUnmount(): This method is called just before the component is unmounted and destroyed. It’s commonly used for cleanup tasks like clearing timers, canceling network requests, or unsubscribing from events.

Functional components do not have a built-in lifecycle like class components.

With React Hooks, functional components can now manage side effects, state, and other lifecycle-related tasks.

1. useEffect (for side effects)

This hook allows you to run side effects (e.g., data fetching, DOM manipulation, subscriptions) in a functional component. It can be used to mimic lifecycle events such as componentDidMount, componentDidUpdate, and componentWillUnmount.

• componentDidMount: You can use useEffect without dependencies to replicate this lifecycle method, as it runs only once when the component mounts.
• componentDidUpdate: You can use useEffect with specific dependencies to replicate this lifecycle method. The effect will run when any dependency value changes.
• componentWillUnmount: The return statement inside useEffect is used to clean up before the component unmounts.

2. useState (for managing state)

While not strictly a lifecycle method, useState is used to manage the state of a functional component. When the state changes, it triggers a re-render, mimicking the component’s state updates in lifecycle methods like getDerivedStateFromProps or setState in class components.

With these hooks, functional components in React can effectively manage lifecycle events, making them as powerful as class components, but with cleaner and more concise code.

Hit the clap icon, if you liked the blog and subscribe for more such blogs.