React: Component Lifecycles
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:
Pre-mounting:
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.
Mounting:
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 componentDidMount. The 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.
The other 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.
Updating:
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?
The 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 componentDidUpdateis invoked.
The componentWillUpdate is called just after shouldComponentUpdatehas finished and just before the new component gets rendered. It has the same arguments asshouldComponentUpdate , of nextProps and 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.
The 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 prevProp and prevState arguments as well as the current ones. It is possible to take some actions within this method without triggering a re-render
Unmounting:
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.
Summary:
Mounting:
Called once on initial render:
constructor
static getDerivedStateFromProps()
render()
componentDidMount
Updating lifecycle methods
Not called on initial render, but always called whenever a subsequent re-render is triggered:
static getDerivedStateFromProps()
shouldComponentUpdate
getSnapshotBeforeUpdate
componentDidUpdate
Dismounting lifecycle method
Called only once, just before the component is removed from the DOM:
componentWillUnmount
Gif of the week:
I don’t have one. Sorry.
