React Component Lifecycle Hooks / Methods

Подписаться 148 тыс.

Просмотров 113 тыс.

50% 1

ReactJS component Life-cycle events Explained , Initial Render Methods componentWillMount, componentDidMount
and Re-render Methods componentWillReceiveProps
, shouldComponentUpdate, componentWillUpdate(
And componentDidUpdate
Article and code samples from this tutorial
* techsith.com\
Please be my patreons on patreaon
* / techsith
Follow me for technology updates
* / techsith
* / techsith1
Help me translate this video.
* ru-vid.com_vide...
Note: use translate.google.com/ to translate this video to your language. Let me know once you do that so i can give you credit. Thank you in advance.

Наука

Опубликовано:

28 янв 2018

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 246

@khoateamer 5 лет назад

I love how you demonstrate the courses. I just need to go to the right spot and learn what I needed. It's super convenient. Well done sir

@ningyima 5 лет назад

Omg, this is the first time heard a person can explain this concept that clear.

@mostafashawki 5 лет назад

The best explanation for ReactJS component Life-cycle events I've ever seen, perfect as usual :)

@crystalmaria2686 5 лет назад

Awesome, clean, & clear explanation - Thank you!

@hollylawly 6 лет назад

Very helpful. Love how you walk through everything step by step. Thanks!

@roshnikutty4252 6 лет назад

Thanks, @techsith, I really liked your examples on when to use these functions.

@arvinddd2003 4 года назад

Amazing video - feel like I'm learning React far faster than other frameworks, solely because I found this channel

@praveenk7957 3 года назад

Bro... Help me I'm very difficult to learn

@dllose 6 лет назад

Thank you for clarifying how React Lifecycle works

@gusehsla 6 лет назад

Simply the best video explaining React lifecycle methods. Thanks.

@priscarosaline3953 2 года назад

This video is amazing. I like how you demonstrate the course. Got it well, thanks

@talkleiner 5 лет назад

Hey man your'e awesome. Some of your advanced javascript videos are truly gems. Keep up the good work.

@devolee8302 5 лет назад

Thanks for this amazing video techsith!

@DamLee88 6 лет назад

a very good instructor, thanks for the video man

@philtrem 5 лет назад

Thanks, that was helpful !

@amircodes 5 лет назад

Thanks for your clear explanation

@manishmaithani398 6 лет назад

Excellent explanation. Please make next videos on Routing, small login-logout app, session n cookies, and web-socket. Buddy, you are doing a great job. Cheers.

@Techsithtube 6 лет назад

Manish . Sure I will make Routing video next. And rest to follow. Thanks for watching!

@SedhuRaguraman 6 лет назад

Great

@alanjb5791 6 лет назад

you are a phenomenal teacher! thank you so much for the clear explanations

@Techsithtube 6 лет назад

Thanks for watching Alan!

@IshantMehta01 6 лет назад

Good video to know basics of react lifecycle hooks

@sol0matrix 5 лет назад

Very detailed life cycle react method it helped me understand them in react native as well thanks

@georgesaeid7231 3 года назад

This is the best video on component lifecycle. Thank you .

@Samster209 6 лет назад

Awesome explanations of whats going on, and I thank you for showing the console.log to follow along.

@Techsithtube 6 лет назад

Great. feel free to check out entire series on React. ru-vid.com/group/PL7pEw9n3GkoVAqCMVTz2mKthyWr-svpQJ

@gurbangurbanov1839 6 лет назад

Very clear explanation, bravo!👍

@Techsithtube 6 лет назад

Thanks Gurban for watching! :)

@yeshwanth.alampalli 6 лет назад

You are just awesome.. I regularly follow your videos. Thank you so much!!!!

@shivanigaddagimath6105 3 года назад

Hi Yeshwanth! Would you be interested in job opportunities in web development? We are a web development company looking for developers. Please let me know if interested!

@Nikhilkumar-qd3oq 6 лет назад

i've learnt so much from this video. thanks a lot.

@netspider01 6 лет назад

You have the best explanations!

@Techsithtube 6 лет назад

Thanks for watching Jun :)

@slavkomilkovic5696 6 лет назад

Great job, very clear!!! Thank you.

@Techsithtube 6 лет назад

Thanks for watching Slavko ! :)

@amnahkhatun8401 4 года назад

Awesome video very clearly explained!!!

@shivanigaddagimath6105 3 года назад

Hey Amnah! Would you be interested in job opportunities in web development? We are a web development company looking for developers. Please let me know if interested!

@dawoodshahat5515 6 лет назад

Simple and to the point explanation. Do a scenario where we can apply all these methods.

@gabrielfono844 4 года назад

thanks so much I love your vidoe and I really like the way that you explained stuff

@babutechmbr4860 4 года назад

I'm following your videos really helpful

@MrPyogi 6 лет назад

Nice Explanation!

@codingevelynmiami4230 4 года назад

Super helpful. Thanks

@riddhipatel257 6 лет назад

Nicely done . It was a great help to me.

@Techsithtube 6 лет назад

Thanks for watching Riddhi!

@ehayrapetyan1082 6 лет назад

superb videos.!thank u very much!

@ehayrapetyan1082 5 лет назад

superb video!thank youu

@chenwen-hao5023 4 года назад

Namaste. Great for beginners to React to understand, honestly. Hope you can have a follow up to his video and show us how to apply in a project. Thanks techsith.

@umutacer01 4 года назад

I cried when I saw your face saying " They die also" :'((

@1119pulkit 5 лет назад

great explanation. Thanks a lot.

@shivanigaddagimath6105 3 года назад

Hi Pulkit! Would you be interested in job opportunities in web development? We are a web development company looking for developers. Please let me know if interested!

@YogeshSatale 4 года назад

Excellent explanation of life cycle

@shivanigaddagimath6105 3 года назад

Hi Yogesh! Would you be interested in job opportunities in web development? We are a web development company looking for developers. Please let me know if interested!

@kshitizshah6685 3 года назад

I dont usually coment on anyone's tutorial video ,But In this case , You are a great tutor thanks a lot I understood all being only 17 year old Still I understood all the 10 lifecycle methods ,Thanks a lot

@Techsithtube 3 года назад

Glad it helped! Keep on learning

@ImranPollob 5 лет назад

You are doing great!!

@alenja34 6 лет назад

Great Explanation. Thanks a lot

@Techsithtube 6 лет назад

Thanks for watching Alen!

@peterbin2685 6 лет назад

good tutorial, thanks a lot.

@activetrad3r 3 года назад

good video. thanks!

@jonsnow9246 5 лет назад

Great video!

@mohdaqib3638 4 года назад

Very helpful, Thanks❤️

@shivanigaddagimath6105 3 года назад

Hi Aqib! Would you be interested in job opportunities in web development? We are a web development company looking for developers. Please let me know if interested!

@hamzajaved1115 6 лет назад

Great content

@ruchirai5775 4 года назад

:) Thanks Techsith, You are awesome !

@Techsithtube 4 года назад

Thanks Ruchi for the comment. :)

@Techsithtube 4 года назад

Thanks Ruchi for the comment. :)

@daviddonadze221 5 лет назад

nice, thank u again

@satyaprakashsahoo7772 2 года назад

Good explanation..

@mohanj2849 Год назад

simple explanation sir...

@gregcastiglione6971 5 лет назад

I suggest you update this section with new lifecycle hooks, some of this will be deprecated in future releases.

@LolowBlazee 6 лет назад

It is always great to go through differents explanations :) Yours is really nice :) if you would like I could help translating it in french ? depends obviously of my time though.

@Techsithtube 6 лет назад

I really appreciate your help in translation. Thanks

@dudiperetz6458 2 года назад

well done sir.

@srikanthmothkuri2327 6 лет назад

Awesome explanation ....

@shivanigaddagimath6105 3 года назад

Hi Srikanth! Would you be interested in job opportunities in web development? We are a web development company looking for developers. Please let me know if interested!

@anandayou 4 года назад

very nice explanation

@shivanigaddagimath6105 3 года назад

Hi Anand! Would you be interested in job opportunities in web development? We are a web development company looking for developers. Please let me know if interested!

@nahombiniam3790 5 лет назад

I think we need more videos on hooks.

@anks21593 6 лет назад

Awesome videos for front end guys...

@shivanigaddagimath6105 3 года назад

Hi Ankur! Would you be interested in job opportunities in web development? We are a web development company looking for developers. Please let me know if interested!

@jawadahmad8469 6 лет назад

Nice...video

@yashrahurikar7533 5 лет назад

Nice Video Thanks

@shivanigaddagimath6105 3 года назад

Hi Yash! Would you be interested in job opportunities in web development? We are a web development company looking for developers. Please let me know if interested!

@wisabid 6 лет назад

Awesome! Can I know what is that you said about 'server rendering' in componentWillMount lifecycle method?

@Techsithtube 6 лет назад

If you are rendering on serverside the only thing server can do is componentWillMount because component is actually gets mounted on client so componentDidMount and other lifecycle hooks runs on clientside.

@annamaisuradze2467 5 лет назад

finally got it 👍👏

@Techsithtube 5 лет назад

I am glad you got it Anna, Thanks for watching!

@shahbazshah3 5 лет назад

Amazing i learn lot of things

@Techsithtube 5 лет назад

Thanks for watching!

@shahbazshah3 5 лет назад

@@Techsithtube sir i have one problem i am learn react but i have problem how i integrate two templates in react admin panel and dashboard ?

@shivanigaddagimath6105 3 года назад

Hi Shahbaz! Where are you based currently? Would you be interested in job opportunities in web development? We are a web development company looking for developers. Please let me know if interested!

@tomaszkonecki1038 6 лет назад

Very good explanation, thank you!

@Tanisha_dragoz 5 лет назад

It was really nice.please post video using of new life cycle hooks.

@shivanigaddagimath6105 3 года назад

Hi Pradeepa! Would you be interested in job opportunities in web development? We are a web development company looking for developers. Please let me know if interested!

@tenzinchosang6737 6 лет назад

awesome!

@PoushyMDatta 6 лет назад

Nice video.

@Techsithtube 6 лет назад

Thanks for watching Poushali ! :)

@neerajkumar-iv4yy 3 года назад

the explanation is nice.

@Techsithtube 3 года назад

Neeraj, thanks for watching!

@shivanigaddagimath6105 3 года назад

Hi Neeraj! Would you be interested in job opportunities in web development? We are a web development company looking for developers. Please let me know if interested!

@amelieyu7486 5 лет назад

Can you do angular lifecycle hooks? appreciate it!

@RethinkingUI 5 лет назад

Sir plz do a video on server rendering example of react

@shivanigaddagimath6105 3 года назад

Hi ! Would you be interested in job opportunities in web development? We are a web development company looking for developers. Please let me know if interested!

@manendra19 6 лет назад

Hi.. Please make a videos on how to create form in React and form validation example also. Thanks

@Techsithtube 6 лет назад

Sure I will try to make tutorial on form validation.

@ranjithkumar-wl6vt 5 лет назад

your explanation is excellent . nice tutorial on react , please try to manke a video on crud operation in react using external API using axios etc.. Thanks

@shivanigaddagimath6105 3 года назад

Hi Ranjith! Would you be interested in job opportunities in web development? We are a web development company looking for developers. Please let me know if interested!

@YandereDev 4 года назад

Cool thumbnail

@hosamhemaily4817 6 лет назад

nice video

@sandeeptimilsina420 5 лет назад

Could you please do a video on interaction between webix and react components for developing UI ?

@cgeetaryan 6 лет назад

Thanks very much for the video. I have a question regarding the binding of “this” at @13:19 “onClick=this.changeState.bind(this)” Can you please explain what the 2 “this” refer to? Cheers

@Techsithtube 6 лет назад

'this' here means your component.

@siddharthsunchu3288 5 лет назад

But is it necessary to use the bind method? It works fines without as well

@jeyreyes8548 5 лет назад

In this case it may work, but you can get some nasty and hard to find bugs if you don't bind your component to your constructor. You can also use ES6 fat arrow function as well to preserve 'this'.

@maheshtak5120 4 года назад

Hi, Can u please make video again with new lifeCycles hooks methods for new releases. this video was really nice!

@shivanigaddagimath6105 3 года назад

Hi Mahesh! Would you be interested in job opportunities in web development? We are a web development company looking for developers. Please let me know if interested!

@Thesachins747 6 лет назад

Very Nie Video!!!

@shivanigaddagimath6105 3 года назад

Hi Sachin! Would you be interested in job opportunities in web development? We are a web development company looking for developers. Please let me know if interested!

@sriharsha7314 5 лет назад

Nice informative lecture. Only thing I wonder you missed to show componentDidUpdate() execution in the browser console. Rest is clear.

@Techsithtube 5 лет назад

Yes i just realized that. THanks for pointing it out sri.

@shivanigaddagimath6105 3 года назад

Hi Sri Harsha! Would you be interested in job opportunities in web development? We are a web development company looking for developers. Please let me know if interested!

@carlover6397 4 года назад

good video can explain componentWillMount is considered legacy ? and getDerivedStateFromProps() ? and why we user super() ? and constructor ?

@shivanigaddagimath6105 3 года назад

Hi Veer! Would you be interested in job opportunities in web development? We are a web development company looking for developers. Please let me know if interested!

@suhasnayak4704 5 лет назад

Good video, but few important things are missing like- 1)Why do we need to make AJAX calls only in componentDidMount(), consequences of doing it in other places. 2)Examples demonstrating shouldComponentUpdate with arguments received.

@shivanigaddagimath6105 3 года назад

Hi Suhas! Where are you based currently? Would you be interested in job opportunities in web development? We are a web development company looking for developers. Please let me know if interested!

@suhasnayak4704 3 года назад

@@shivanigaddagimath6105 Hey, I am not looking for job opportunities. Thank you!

@shivanigaddagimath6105 3 года назад

@@suhasnayak4704 Okay. Thanks for your response!

@abhishekchawla29 5 лет назад

hi @techsith .. I just started learning react and I've a doubt here @3:32 in this video. Since Constructor runs first the name that should have got displayed is peter. Can you help me out with the explanation why John is getting displayed ?

@shivanigaddagimath6105 3 года назад

Hi Abhishek! Would you be interested in job opportunities in web development? We are a web development company looking for developers. Please let me know if interested!

@Salomao-Rodrigues 6 лет назад

The window.innerWidth example in componentWillMount will break if rendering on the server, as the window object wouldn't exist.

@Techsithtube 6 лет назад

Yes, you cant use window.innterWidth on server-side

@amitk0277 5 лет назад

There is not code sample for this lecture on Techsith.com or on your Github. Can you please provide the link . Thanks for the tutorials.

@shivanigaddagimath6105 3 года назад

Hi Amit! Would you be interested in job opportunities in web development? We are a web development company looking for developers. Please let me know if interested!

@prachiagarwal3680 3 года назад

Just a note, if parent renders.. all child components will not go through all constructor, willmount and all.. it will only call child's render at the time of parent re-rendering..

@shishirrai1069 3 года назад

thanks

@shivanigaddagimath6105 3 года назад

Hi Prachi! Would you be interested in job opportunities in web development? We are a web development company looking for developers. Please let me know if interested!

@DeepanchakravarthiK 6 лет назад

Hi, I would like to know your comment about Life cycle events. Warning: componentWillMount is deprecated and will be removed in the next major version. What do you think about it? What are the alternatives? Thanks in advance

@eleazarfederio1718 3 года назад

i want to build a small project wich I can use all this hooks, what is the best small projects to make?

@Techsithtube 3 года назад

Eleazar, that is a good question. you can build a page where you load some data via api call, also have another field that makes change in the state by changing a field . This should be good to pretty much test all the hooks.

@ramv7542 5 лет назад

Hi techsith, I liked your videos regarding reactjs, and also i have little bit confusing with the lifecycle methods, please share me a pdf or some notes, this is very helpfull to, Thanks to techsith

@shivanigaddagimath6105 3 года назад

Hi Ram! Would you be interested in job opportunities in web development? We are a web development company looking for developers. Please let me know if interested!

@ramv7542 3 года назад

@@shivanigaddagimath6105 shall I know about your details

@shivanigaddagimath6105 3 года назад

@@ramv7542 Can we please connect on LinkedIn or gmail for more details? Just @ Shivani Gaddagimath on LinkedIn and request to connect! I'm not able to post my link here for some reason.

@shivanigaddagimath6105 3 года назад

@@ramv7542 Hi Ram! Please connect on LinkedIn for more details!

@ramv7542 3 года назад

@@shivanigaddagimath6105 ramv9822@gmail.com, attach ur details in this

@motivationalstory17 4 года назад

Why other hooks console log not running initially when you added the setstate code.. Prior to adding other console log was showing

@Techsithtube 4 года назад

Deepak exactly which line or time in the video you are referring to?

@shivanigaddagimath6105 3 года назад

Hi Deepak! Would you be interested in job opportunities in web development? We are a web development company looking for developers. Please let me know if interested!

@shahid643 3 года назад

Hi sir, could you please make a video on editable table cell data for updating data using React hooks.

@shivanigaddagimath6105 3 года назад

Hi Shahid! Would you be interested in job opportunities in web development? We are a web development company looking for developers. Please let me know if interested!

@syedkashifnaqvi1268 5 лет назад

very helpfull for me,when i update the state in componentDidMount then show me error in console,in this way your memory leak chance is increase?

@shivanigaddagimath6105 3 года назад

Hi Syed! Would you be interested in job opportunities in web development? We are a web development company looking for developers. Please let me know if interested!

@syedkashifnaqvi1268 3 года назад

@@shivanigaddagimath6105 yes I'm interested.

@shivanigaddagimath6105 3 года назад

@@syedkashifnaqvi1268 That's great! Could we connect on LinkedIn or gmail for more details? Just @ Shivani Gaddagimath on LinkedIn and request to connect! The first profile that pops up is mine.

@syedkashifnaqvi1268 3 года назад

@@shivanigaddagimath6105 you can connect with me on LinkedIn www.linkedin.com/in/syed-kashif-8b48a015b/

@syedkashifnaqvi1268 3 года назад

@@shivanigaddagimath6105 I'm not find your id yet please you find me ,above send you profile link

@sriram_scofield 5 лет назад

Is componentwillupdate() called before initial rendering ?

@Techsithtube 5 лет назад

its re-rendering phase

@shivanigaddagimath6105 3 года назад

Hi Sriram! Would you be interested in job opportunities in web development? We are a web development company looking for developers. Please let me know if interested!

@voodoo_teddy 5 лет назад

can you do a video on Context API?

@bandhammanikanta1664 5 лет назад

Good lecture.. but only thing is 'at time of video starting, you were very close to the camera which I haven't liked. means you were staring too focused which is disturbing. Sorry If incase you felt bad.. Yes, learned from your video.. Thank you sir.

@princechaudhary9163 5 лет назад

stfu you dumbass

@shivanigaddagimath6105 3 года назад

Hi Bandham! Where are you based currently? Would you be interested in job opportunities in web development? We are a web development company looking for developers. Please let me know if interested!

@abhicomputerguy 2 года назад

❤️❤️❤️❤️❤️❤️❤️

@sandy261991 4 года назад

Hi, can you please make a new video on the latest life cycle hooks.Thanks.

@shivanigaddagimath6105 3 года назад

Hi Santosh! Would you be interested in job opportunities in web development? We are a web development company looking for developers. Please let me know if interested!

@pradhumnsharma4253 6 лет назад

I don't understand one thing, when you defined componentWillUnmount in App.js file why is it showing child componentWillUnmount on console.log Second thing I want to ask is that Is it good coding if we call lifecycle hooks in another function?

@Techsithtube 6 лет назад

basically, when component is unmounting it first unmount it children. that is why child components also shows componentWillUnmount

@pradhumnsharma4253 6 лет назад

I want to know that when I try to setstate of component's variable without using lifecycle hooks but with custom function why does it goes into infinite loop and call same function again and again. I triggered that function with onclick event so why is it rerendering without clicking again

@shivanigaddagimath6105 3 года назад

Hi Pradhumn! Would you be interested in job opportunities in web development? We are a web development company looking for developers. Please let me know if interested!

@meir231 5 лет назад

Nice comment

@ranesh237 6 лет назад

ComponentWillMount and constructor server the same lifecycle purpose. So you don't see ComponentWilMount if you're using an ES6 class.

@Techsithtube 6 лет назад

Got it. Thanks.

@sushantkshirsagar 6 лет назад

I am calling a fetch ajax call in DidMount, where I get the json data which I set it in setState and in my redux store. Later when I reload/refresh the page the data from the state is gone. I have been trying to resolve this for a long long time but all in vain. :(

@Techsithtube 6 лет назад

Can you send me the code where it setstate and redux.

@sushantkshirsagar 6 лет назад

Sure. Where do you want me to send ?

@sushantkshirsagar 6 лет назад

For the workaround I am storing data in my localstorage and assign it to state in DidMount and ajax call I moved to WIllMount. But that is wrong, it should be done by redux. I have also added persistData in redux store. But the data in it is updated after few render calls have gone passed. And then it gets the data. I wonder why it issues multiple render calls even before fetching the data from ajax in WillMount

@Techsithtube 6 лет назад

Do you have it on Github?