React Lifecycle
Lifecycle of Components
In react, components have a life cycle that consists of different phases. Each phase has a set lifecycle method, React lifecycle methods are special methods in a React component that allow you to run code at specific points in a component’s life. These methods are part of class components and enable you to manage a component’s behavior during its existence in your application. In functional components, hooks are used to perform tasks that would traditionally be handled by lifecycle methods in class components.
The lifecycle of a React component consists of three main phases: mounting, updating, and unmounting.
Mounting
The Mounting phase begins when a component is first created and placed into the DOM.
React calls these four built-in methods, in this order, when mounting a component
- constructor()
- getDerivedStateFromProps()
- render()
- componentDidMount()
Constructor ()
Purpose: This method is called when the component is being created and initialized.
Usage: It’s typically used to initialize state and bind methods.
The constructor() method is called with the props as argument
getDerivedStateFromProps()
Purpose: This method is called right before rendering the component, both during the initial mount and subsequent updates.
Usage: It’s used to update the state based on changes in props. It’s a static method, meaning it doesn’t have access to ‘this’.
render()
Purpose: This method is required and is responsible for describing what the UI should look like.
Usage: It returns the React elements (JSX) that make up the component’s UI.
componentDidMount()
Purpose: This method is called after the component has been rendered to the DOM.
Usage: It’s commonly used for making API calls, setting up subscriptions, or any other side effects.
Updating
The Updating phase occurs whenever there is a change in the component’s data, either from its own state or from its properties (props) provided by its parent component.
Get Kalindu Sudaraka’s stories in your inbox
Join Medium for free to get updates from this writer.
React has five built-in methods that gets called, in this order, when a component is updated:
- getDerivedStateFromProps()
- shouldComponentUpdate()
- render()
- getSnapshotBeforeUpdate()
- componentDidUpdate()
getDerivedStateFromProps()
Called During Updates: ‘getDerivedStateFromProps’ is the first method called when a component updates.
Updates State Based on Props: This method is the natural place to update the state object based on changes in props.
shouldComponentUpdate()
In the `shouldComponentUpdate()` method, you can return a Boolean value to specify whether React should continue with the rendering process or not. By default, it returns `true`,
meaning React will re-render the component whenever there are changes in props or state. If you return `false`, React will skip the rendering and updating process for that update cycle. This can be useful for optimizing performance by preventing unnecessary renders.
Render()
The ‘render()’ method is called when a component gets updated. It is responsible for re-rendering the HTML to the DOM to reflect the new changes.
getSnapshotBeforeUpdate()
The `getSnapshotBeforeUpdate()` method lets you capture the props and state before an update, which can be useful for tasks like recording the scroll position.
If you use `getSnapshotBeforeUpdate()`, you must also implement `componentDidUpdate()`, as it receives the value returned by `getSnapshotBeforeUpdate()`. Without `componentDidUpdate()`, you will get an error. This pairing ensures that any pre-update information can be properly used after the update.
componentDidUpdate()
The componentDidUpdate method is called after the component is updated in the DOM.
Unmounting
The unmounting phase occurs when a component is removed from the DOM.
React has only one built-in method that gets called when a component is unmounted:
componentWillUnmount()
The componentWillUnmount() method is called when the component is about to be removed from the DOM.
Summary
React lifecycle methods help manage a component’s behavior at different stages of its existence. During mounting, methods like `constructor()`, `getDerivedStateFromProps()`, `render()`, and `componentDidMount()` initialize the component and handle side effects. In the updating phase, `getDerivedStateFromProps()`, `shouldComponentUpdate()`, `render()`, `getSnapshotBeforeUpdate()`, and `componentDidUpdate()` manage state changes and optimize re-renders. Finally, `componentWillUnmount()` handles cleanup before the component is removed from the DOM. These methods ensure efficient and effective component management throughout its lifecycle.
