What are Component Life Cycle Events - React For Beginners [25]
What are Component Life Cycle Events - React For Beginners [25]
In this tutorial, we are going to understand the #component #life cycle event.
In many situation in which you need more granular control over a component. for instance if you are creating a checkbox which change the size when we click on it base on the screen width.
Or wanted to create a component which call an ajax request when we load the page mount the component.
The best approach is to use component lifecycle events. By mounting events, you
can inject the necessary logic into components.
Moreover, you can use other events to make components smarter by providing specific logic about whether or not to re-render their views.
Each component has several “lifecycle methods” that you can override to run code at particular times in the process.
These methods are called in the following order when an instance of a component is being created and inserted into the DOM:
let's say you created a component and start your development server.
the react lifecycle event will first call
The constructor of the class which create an instance of the component. then it will call the getDerivedStateFromProps()method this will return an object to update the state, or null to update nothing.
And just after that the render method is called.
The react component event lifecycle belongs to three categories.
Mounting events—Happen when a React element (an instance of a component
class) is attached to a DOM node
Updating events—Happen when a React element is updated as a result of new
values of its properties or state
Unmounting events—Happen when a React element is detached from the DOM
Each and every React component has lifecycle events that are triggered at certain moments depending on what a component has done or will do.
In this three categories react defines several component events.
Mounting—React invokes events only once.
Updating—React can invoke events many times.
Unmounting—React invokes events only once.
In addition to lifecycle events, I’ll include constructor(), to illustrate the order of
execution from start to finish during the component lifecycle.
constructor()—Happens when an element is created and lets you set the
default properties and state.
In this three categories we have several methods.
Mounting
componentWillMount()—Happens before mounting to the DOM
– componentDidMount()—Happens after mounting and rendering
Updating
– componentWillReceiveProps(nextProps)—Happens when the component
is about to receive properties
– shouldComponentUpdate(nextProps, nextState) bool—Lets you optimize
the component’s rerendering by determining when to update and
when to not update
– componentWillUpdate(nextProps, nextState)—Happens right before the
component is updated
– componentDidUpdate(prevProps, prevState)—Happens right after the
component updated
Unmounting
– componentWillUnmount function()—Lets you unbind and detach any event
listeners or do other cleanup work before the component is unmounted
Each of these functions give you more granular control over a component.
event’s name makes clear to developers when the event is triggered. For
example, componentDidUpdate() is fired when the component is updated.
Learn More From Our Website:-
www.dailywebtuition.com
Attribution
Icon made by monkik from www.flaticon.com
Background Music: https://www.bensound.com
Photos: https://www.pexels.com
If you have any question please comment me on my video or you can write it on channel discussion.
Thank You...!
