What is a component’s lifecycle?:
The React framework was designed to enable developers to create complex and highly reactive UIs. This enables the components to quickly adapt to changes from user interactions or updates in the app. In order to enable this, React components go through what is called a component lifecycle. For a user, everything you see in a React application is a React Component or a part of one. Think of Facebook, every time you want to talk to someone, a Chat component is created. When you’re sending messages you’re updating the component and finally, when you close the chat, the component gets deleted.
For each phase of a component’s life, React is able to provide us inbuilt methods in the lifecycle of the component called lifecycle hooks or lifecycle methods. Let’s go through each phase and dissect each method:
React Components are JS classes and functions. If they are a class component this means that even before mounting has begun, the class’s
constructor function is called. A constructor is the first function called when a component is initialized, this makes it useful for creating an initial state for a component.
When a component is initially created, it gets mounted onto the DOM. During this stage, there are two lifecycle hooks available to use:
static getDerivedStateFromProps, and
static getDerivedStateFromPropsis called just before render and is used for one reason, it allows a component to update its state as a result of a change in props. Read here on when you would need to invoke it.
componentDidMountwill get called just after the render method and is only called once in a lifecycle. You would use this method to set up any long-running processes or asynchronous processes such as fetching and updating data. Such as updating the state with API data responses.
The next phase of the lifecycle is updating. Whenever a component's state or props are changed, it gets re-rendered on the page. It reacts to any changes. A re-render can be triggered in a couple of ways, either when a user interacts with the component, or if new data (state and props) is passed in. For example, going back to our Facebook chat, id you were to send a message, the component gets re-rendered in order to display that message. But what lifecycle hooks are present during an update?
shouldComponentUpdatemethod is invoked just before a component is about to re-render. At this point, you can compare the old and new state and props and prevent any unnecessary re-renders. If the changes in state and/or props don’t actually alter the component that’s being shown to the user, there is no point “repainting” it as it is an unnecessary performance drain. Alternately you can use a pure component as a pure component will only render if the props or state of that component has changed. To implement it, you need to follow the same rules as a pure function. It must not have side effects and be deterministic.
Just before updating,
getSnapshotBeforeUpdate is invoked. You can guess what this method does, it returns a snapshot. This snapshot allows us to capture things like scroll position which this sort of value can change in the time before
componentWillUpdate is called just after
shouldComponentUpdatehas finished and just before the new component gets rendered. It has the same arguments as
shouldComponentUpdate , of
nextState. An example of using this method is if you have any assessments to be performed before re-rendering and after the state/props updates.
componentDidUpdate . This method is called just after the re-rendering of a component. In this method, you will have access to the previous state/props with the
prevState arguments as well as the current ones. It is possible to take some actions within this method without triggering a re-render
At the unmounting stage, the component gets deleted and cleared out of the page. During this phase of the lifecycle, there is only one hook.
componentWillUnmount which is called just before a component gets removed. This is used to clear out any stuff that was set up in
componentDidMount.For example, if you set up a timer that goes up every second when a component was mounted, when the component gets removed you wouldn’t want the interval to continue to increase, so here you would clear the interval.
Called once on initial render:
Updating lifecycle methods
Not called on initial render, but always called whenever a subsequent re-render is triggered:
Dismounting lifecycle method
Called only once, just before the component is removed from the DOM:
Gif of the week:
I don’t have one. Sorry.
React.Component - React
This page contains a detailed API reference for the React component class definition. It assumes you're familiar with…
How to understand a component's lifecycle methods in ReactJS
In this article, we are going to explore the lifecycle methods of ReactJS. But, before moving ahead to React's…