ReactJS Tutorial – 23 – Component Mounting Lifecycle Methods
Video Title: ReactJS Tutorial – 23 – Component Mounting Lifecycle Methods
In this video let’s take a look at the mounting lifecycle methods that is methods which are called when an instance of a component is being created and inserted into the Dom and we will be going through them in the order that they are invoked so first we have
The constructor it is a special function that will get called whenever a new component is created now what is the constructor used for well the constructor is perfect for initializing state or binding the event handlers to the class instance what you should do in a constructor is cause side effects for example you
Should never make HTTP requests from within a constructor there are also two important points to keep in mind when it comes to defining your own constructor the first one is that you have to call a special function called super this will call the base class constructor in our
Component we have access to this dot props only after we have initially called super passing in the props as an argument the second point is that constructor is also the only place where you are expected to change or set the state by directly overwriting this dot state
Fields in all other scenarios you have to use this dot set state as a constructor set initial state find event handlers and don’t cause any side effects like making Ajax calls for example the second method we have is a static method get’ derive state from probes of the react documentation classifies this
Method as a rarely used lifecycle method this method is basically used when the state of the component depends on changes in props over time so let’s say you have a component but the initial state of the component depends on the props being passed to the component in
Such a scenario you can use this method to set the state since this method is a static method it does not have access to the disk keyword so you cannot call this dot set state with in this particular method instead you simply have to return an object that represents the new state
Of the component again what you shouldn’t do is cause side effects for example fetching data from an endpoint so get derived state from props use it when state depends on changes in props over time and also did not cause any side effects the third method is the
Render method which by now we are quite familiar with the render method is the only required method in a class component in the render method we simply read this dot props and this dot state and return the JSX which describes the UI the render function is a pure
Function for the given props and state it should always render the same UI what you should not do here is changing the state of the component or interacting with the Dom or making any Ajax calls since it is the render method GSX which also contains the other children
Components right after the parent render method the children components lifecycle methods are also executed we will see this order of execution very shortly in code so render method read props in state and return the JSX the final method which is part of the mounting phase is component dead
Mount this method will be called only once in the whole lifecycle of a given component and it is invoked immediately after a component and all its children components have been rendered to the dawn this method is the perfect place to cause side-effects you can interact with
The dawn or perform any Ajax calls to load data so component did mount is a good place to perform initialization that requires Dom nodes and also load data by making Network requests all right now that we have a good understanding of the four methods and
What can or cannot be done in each of the methods let’s head over to the code and see their order of execution back in vs code I’m going to start off by creating a new file the file name is going to be life cycle a dot J s
Within the file I’m going to use the react snippet RCE to create a class component I will get rid of the named export though and include the component in app component now let’s add the different lifecycle methods first we have the constructor I’m going to use the react snippet iconst
To create a new constructor within the state I will simply add a property mean initialized to vishwas we don’t really need the state in this video but we will make use of it in the next video what we do need though is a console log statement to understand the
Order of execution so within the constructor console dot log lifecycle a constructor the second method we have is the static method get’ derived state from probs say static get derived state from probes and this method gets access to probes and state as parameters and has to return
The new state or null to keep it simple let’s return null and to track the execution order I will add a console lot statement which says lifecycle a get derive state from props make sure to include the static keyword or else the method will be ignored the
Third method we have is the lender method which is already present in the JSX I will simply add the text lifecycle a and I will add the consulate statement to track the execution order life cycle a render now the final method is component dead mount I’m going to add it
Before the render method component dead mount and within the body we will simply log to the console life cycle a component did mount now let’s save the file and head to the browser if I open the console you can see the order of execution first we have the constructor
Then we have get derived state from probes after that the render method and finally component did mount this is the order of execution during the mounting phase now let’s see what happens when the component has a child component I’m going to go back to vs code and create a new file
Lifecycle B dot J s I’m going to copy the content from lifecycle Aegeus and paste it in lifecycle b dot j s after that i will replace all occurrences of life cycle a with lifecycle be you and in the lifecycle a component I will include lifecycle B component so
Parenthesis and closing div tag move this inside and then add lifecycle B component so we have life cycle a as the parent component and life cycle B as the child component let’s see what happens to the order now if you take a look at the console you
Can see that first we have lifecycle a constructor then lifecycle a get derived state from props that is followed by the render method of lifecycle a but after that we have the lifecycle methods of the child component which is lifecycle B the constructor get derive state from props render and component did mount
Because the render method knows about the children components the execution passes on to the children after the parent component render method the child component methods are then executed in order constructor the derive state from props render and component did mount after the child component has completely rendered the parent component component
Did mount is executed it is really important to know the order of execution because it helps you avoid writing code that might have unexpected behavior so this is the order of execution during the mounting phase in the next video let’s take a look at the different lifecycle methods and their order of
Execution during the updating phase of a component thank you guys for watching don’t forget subscribe I’ll see you guys in the next video
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
Completed video 23. Thank you 🙂
bro is god
in my case, why all of the console.log called twice?
All those learning in 2023,this is completely replaced by React Hooks,start there and learn axios etc and much more! The playlist is still worth every video.😀
Now, this is the best video I've watched in this series. That is well explained, thank you
This video is so good, it's easy to understand the way to talk absolutely clearly.. nice bro add more videos to inspire some developers to want.
Thank you
this is am amazing course
Do you have soft copy of this course?
Why am I getting console.log statements twice? 🤔
good stuff mate
This was such a clean explanation !! ❤ it.
The Michael Jackson of React. Well done.
Can anyone tell me the use case of this topic
Why did mine get clone in Console?
LifecycleA constructor
LifecycleA constructor
LifecycleA getDerivedStateFromProps
LifecycleA getDerivedStateFromProps
LifecycleB constructor
LifecycleB constructor
LifecycleB getDerivedStateFromProps
LifecycleB getDerivedStateFromProps
LifecycleB render
LifecycleB render
LifecycleB componentDidMount
LifecycleA componentDidMount
LifecycleB componentDidMount
LifecycleA componentDidMount
Why to write componentdidmount before render method, if these methods have certain order of execution,does it even matter in which order they are written
This may be a basic question but when I reach 7:46 in video, my browser prints each console.log statement twice. Anyone knows why?
Thanks
I follow the same code but each methods executed twice…., how?
what if you need to make Ajax call in LifecyleA Component and pass it to B component. B component is rendered. will B component re-render ?
T
he componentDidMount gets called twice.
Can anyone explain this?
Why this happened??
Nice tutorial
Crystal clear explanation ! Thanks
Awsme video brother. I have one question. I was trying the same at my end but get the console statement running twice at my end. Why is it so.
1. constructor
2. getDerivedStateFromProps
3. render
4 componentDidMount
order
Perfectly explained!
Thanks a lot for taking your time and explaining it clearly. Appreciate your efforts you had put for this tutorial.
7:17 componentDidMount method was written before render method but it was executed after render method.
Vishwas is the Michael Jordan of teaching React. A true gem.
God Bless Bro.
2:22 static method does NOT have access to this keyword
The clarity this tutorial brings is very good. Thankyou so much.
Can anyone tell me why are we learning React lifecycle methods?
I mean, what is it, and where is it used in practical life?
Thank you ❤️
Very well explained.
Learning everyday from you. Your way of teaching is the best I have come across. PS: rigouressly learning React sice 2 yrs. You make concepts clear. Thanks a lot.