2.7 KiB
title |
---|
Life Cycle Methods Of A Component |
Life Cycle Methods Of A Component
When we start working with components, we need to perform several actions to update state or to perform some actions when something changes in that component. In this scenario, life-cycle methods of a component comes handy !! So let us dive into them in this article.
Broadly, we can divide the life cycle methods into 3 categories.
- Mounting
- Updating
- Unmounting
As life cycle methods are self explanatory, I'm just going to mention the method names. Please feel free to contribute to this article, if necessary.
Mounting:
a. constructor()
b. componentWillMount()
c. render()
d. componentDidMount()
Updating:
a. componentWillReceiveProps()
b. shouldComponentUpdate()
c. componentWillUpdate()
d. render()
e. componentDidUpdate()
Unmounting:
a. componentWillUnmount()
Some interesting facts to notice:
constructor
,componentWillMount
,componentDidMount
andcomponentWillUnmount
will be called only once during the lifecycle of a component.componentWillUpdate
, andcomponentDidUpdate
will only be executed if and only ifshouldComponentUpdate
returns true.componentWillUnmount()
will be called just before unmounting any component and hence can be used to free up the used memory, close any connections to DB, etc.
Many things can be learned by diving into coding. So get your hands dirty by coding.
Note:
"Deprecation warnings will be enabled with a future 16.x release, but the legacy lifecycles will continue to work until version 17."1
"Even in version 17, it will still be possible to use them, but they will be aliased with an “UNSAFE_” prefix to indicate that they might cause issues. We have also prepared an automated script to rename them in existing code."1
In other words, these previously lifecycle methods will still be available as:
UNSAFE_componentWillMount
UNSAFE_componentWillReceiveProps
UNSAFE_componentWillUpdate
New Lifecycle Methods
New lifecycle methods will be introduced in React 17
getDerivedStateFromProps
will be a safer alternative tocomponentWillReceiveProps
.getSnapshotBeforeUpdate
will be added to support safely reading properties from the DOM updates are made
Many things can be learned by diving into coding. So get your hands dirty by coding.