Learn useEffect In 13 Minutes

Подписаться 1,6 млн

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

50% 1

🚨 IMPORTANT:
Full React Course: courses.webdevsimplified.com/...
1 Year Free Hosting: www.atlantic.net/webdevsimpli...
Use code KYLE for an additional $50
In this video I cover everything you need to know about the useEffect hook. I compare this hook to the old way of doing things with lifecycle methods in class components so you can understand how to start using hooks effectively in your projects. This is part of a series of React videos where I cover all the important hooks in React.
📚 Materials/References:
useState Video: • Learn useState In 15 M...
useEffect Blog Article: blog.webdevsimplified.com/202...
React Hooks Playlist: • React Hooks
🧠 Concepts Covered:
- How to use hooks in React
- How to convert class lifecycle methods to function effects with useEffect
- How to use the useEffect hook
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#ReactJs #WDS #useEffect

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

8 май 2020

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

I paid money for a full react course on udemy and after every hook I "learn" from there, I come to your channel to see it reexplained better. 😅

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

course by whom?

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

Me too! hahah!

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

Yes, me too..

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

Me too. lol

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

Lol me 2

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

One note at 5:00 for people newer to React. If you try to update state with setState (setResourceType in this case), but the value is the same as the current state, it won't trigger a rerender. This is because of the way the React team has chosen to implement useState (it helps to prevent unnecessary rerenders). This can become an issue when your state is an array (or an object), as you can mutate the array, try to update state, and it may not trigger a rerender because React thinks the array is the same (since the array reference is the same). You can solve this issue by using the spread operator (...) to create a truly new array or object: setState([...array]) or setState({...object}). More info on that at if you Google something like "usestate update not always triggering rerender component"

@nemanjastankovic941 Год назад

Thanks for this heads-up. It's something really useful to know

@prince5922 Год назад

Correction: if you use _setState_ it will always re-render.

@vapeurdepisse Год назад

I found that out early on. There is this rule in React that "one simply doesn't mutate state" and it applies to hooks as well. React uses Object.is() to check for equality between the previous state and the new state, and if you mutate an array or object, it is still the same object and so it won't update.

@mrmartinwatson1 Год назад

@@prince5922 no

@tmode9303 Год назад

@@prince5922 No, it the value is same as before it won't re render. You need to spread

@user-hs2so8zo9m 6 месяцев назад

I knew he was going to be good when he starred directly into my soul

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

You have the gift of breaking down any difficult topics in a way that everyone can understand. I wish there was a super like button on RU-vid 👍

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

I thought so too, he can probably bundle this up and make it into an in-person bootcamp and charge 15k per head.

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

yes, he is that guy.

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

super like from here

@KanchanSharma-bg2yh 3 года назад

I saw many videos on hooks before, but this one only makes me understand completely in detail and in first attempt only. Thank you so much.

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

The subscribe button.

@michaelbarbarelli3764 Год назад

The fact that the clean-up code runs before the event listener is a key point that's rarely communicated in docs, tutorials, etc. Very well done!

@lukas.webdev 9 месяцев назад

Yes, I agree 100%! 😉

@loneWolff1995 2 месяца назад

Can you explain Two things why App being rendered twice, when you click post twice, I mean when you clicked first time, I understand app being rendered, but when you clicked again on Post. The app shouldn't get rendered as state is already same. Second why useEffect ran twice, even though you are not using StrictMode *Kindly help !!!!*

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

This is the most understandable explanation I’ve ever found. Good job mate and thanks.

@johnnielondon9840 9 месяцев назад

I’ve now watched a couple of your videos for different react hooks and they’re great. Really clear and to the point. Thank you Kyle

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

Extremely Useful, I've just picked up react and these small doses of lectures are really making the difference. Thanx, Kyle.

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

You are a genius. The way you explain things and connect the dots is simply awesome. It is very easy to connect to what you explain and easily get accustomed to new technology . Great Going bro, keep it up :)

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

You are the best man. So quick and easy to understand when you teach it. Can't believe I've been putting off taking the time to learn hooks when all it would have taken was a 13 minutes with you👍🏼

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

Kyle is the best ,he explains so much things in a very time span.Other channels sometimes confuses me with so much mess.

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

Wow, this is the best explanation I have ever seen so far. My respect.

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

This guy is really awesome, talking too slowly but telling a lot of the topic for making it much easier, love u man 💚

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

dude I wish I had met this channel sooner. You're amazing

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

Hey Kyle thank you for this new series. I've been a rough time trying to study steadily while working from during this quarantine. This new series got me back on track. Waiting for the next episode!

@mohdsameer8899 5 месяцев назад

What do you do now just curious 🧐

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

Simple clear explanation of the basic concepts. Very helpful. Thank you.

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

wow. never seen state being used to fetch data dynamically like that with the press of one button! awesome!

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

You are incredible! I'm self taught and employed as a full stack engineer, so I've been able to find some high quality tutorials on my journey. But you my friend, are truly an incredible teacher on intermediate/advanced language topics and I hope you continue to keep making these vids!

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

ditto man! hes a beast!!

@user-yz5hj3zg2x Год назад

FINALLY!! After reviewing a ton of tutorials and explanations, I could finally understand what this hook was for! Thanks a lot!

@calarcher4869 Год назад

every video of yours i search for because I am trying to understand a seemingly impossible concept, I leave 15 minutes later having a great understanding. 100% live up to your name, Web Dev Simplified

@Hidiho2u Год назад

I understand more in the last 30 minutes than I did 8 hours of lectures and workshops ago. Thank you so much!

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

This video makes useEffect so clear and I feel like I finally understand it now thanks to you!

@marikabasagoitia6828 Год назад

As usual, thank you so much for your explanations. By far the best resource for web development on RU-vid!

@is-sam 2 года назад

You are awesome man! You explain things in a very simple and comprehensive manner, thank you :)

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

This video is incredible, thank you for explain so easier topics that seem impossible to understand!!

@cevatmorcicek9134 Год назад

Thank you so much!!The examples were quite easy to understand.I got it so well.I wish you the best!

@bigeddie1994 Год назад

Any time I watch your videos, you connect the dots for me. Thank you for everything.

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

You tone is so smooth I can understand you code without looking at screen. Thanks for such great videos

@23Kattayopp 18 дней назад

Kyle, every single time I feel that I don't understand something as good as I'd want, either it's html/css/js or react, I go and search a video on that subject from you. It's been a year and a half and it worked every single time. And I want to thank you for that! You're awesome.

@go_all_the_way Год назад

you're a life saver and amazing teacher

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

6 minutes of this video and i understand use Effect, something that i didnt understand in one hour lesson. Thank you very much 😊

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

So clear... I was struggling with this concept, now it's ok, thank you very muck Kyle !

@fithamlakfikrie4657 Год назад

Thank you very much 🙏, It was a very clear explanation with sufficient but short examples.

@siddharthmehta6966 Год назад

This is the best explanation one can get on internet !!!! Simply wow . Thanks for the tutorial

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

As always: simple and clear explanation! Thanks!

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

So many times used useEffect but now i understand properly, respect for you sir.

@michaelNXT1 Год назад

You're the best, I'm starting to learn React Native and I'm looking forward to have my questions answered by you!

@cafuune 11 месяцев назад

was struggling all day with this thing, now its like crystal clear lol thank youuuu

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

You definitely have the teacher mindset. Really clear!

@non-stereotypicalprogramme3666 3 года назад

Thanks for this video. Fast, simply and well explained

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

I'm primarily a backend/infrastructure dev and have been struggling with some very basic React concepts. I watched your useState video first and you did a fantastic job breaking it down and simplifying it so that my smooth brain could understand it. You've done a fantastic job here too. Well done!

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

Man, I have the same issue, of course I'm just a student right not, but the useState was a killer video for me. With that video I understood a lot of react but this useEffect is mind blowing, really funny how a lot of people love React but it is kind of complex to get it when you advance to the second page which is like, man is this so freaking easy? hah

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

@@veoquenoesunproblema That is because people are learning ONLY React, which relays on JS, pretty much. Good video, however this guy like almost ALL people try to assign the lifecycle to useEffect. But it is not pretty much the case because functional components behavior different from react classes, Dan explained in its blog ALL DETAILS. Also this guy does not talk about Closures and why it is important to know them... (Course because people do not learn javascript but react)....

@kal1nadam205 6 месяцев назад

amazing explanation in such a short video, thank you!

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

Amazing video thanx Kyle actually going to start using hook now!

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

Great explanation of something i always found very abstract, thanks!

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

close to nine months not understanding useEffect, thans for your help. It was the best one

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

The best REACT explanation on RU-vid. Thanks.

@bigbabyg Год назад

honestly, along with this dope explanation, i recommend just reading the react docs, they are well explained and easy to digest.

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

Thank you man. Keep making these types of videos. I love them all. Very cool precise and clear. No b.s.

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

man u are awesome the way u explain things in a simple manner really helps a lot for the people keep up doing the good stuff..

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

You have a gift man, I really understand when I watch your videos!

@rickeyupadhyay6898 Год назад

I just love the way you explain Very straight forward!

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

very good tutorial! I understood this sentence and i hope that I will make bigger progress! Thank you!

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

yo man hats off to you man you can break any complex topic into simple pieces love your vids man.

@DeepakSingh-sy4ws 3 года назад

i have no words which can appreciate your work.

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

You have the perfect articulation. Great stuff, thanks.

@rodrigom.castilho4095 3 года назад

Solved a massive pain in the ass 4 minutes, 6 seconds in. Best subscription I ever made here.

@madsidification Год назад

Dude you explained is so easily, simply amazing man 🔥

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

Excellent examples, very clear explanations, thanks!

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

wow.. that clean up thing just blew my mind. I have been a react developer for a while now, still didn't know this. Well everyday we learn, we grow.

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

Simple and no clutter, great one.

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

Thank you. I fully understand React hooks in really really 13 mins.

@darentok8608 Год назад

Thank you for this. Finally understood useEffect and useState

@pranavp4122 Год назад

Thank you Kyle...... Your video is very helpful for the beginners like us!

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

Your videos are very easy to understand. Thanks for the content.

@hniehslimi2894 11 месяцев назад

This is the most understandable explanation I’ve ever seen

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

Man you literally are a god to me! I learn more from you than at University!

@mashaisalive Год назад

один из немногих на ютубе, кто реально понятно объясняет. god bless him

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

Your channel is a game changer. Thanks Kyel!

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

Great explanation as always, Thank you very much!

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

Love your videos. Explanations are clear

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

very much comprehensive and intuitive video, Great work thank you :)

@ikhtiyorkhikmatov6316 Год назад

Best explanation, found exact answers about how does effect actually work

@user-wm7el6sq2j 8 месяцев назад

Really great explanation! Thank you!

@BinaryGear 4 месяца назад

Fantastic tutorial as always!

@frankenfishdom 6 месяцев назад

thanks for breaking this down so well, I finally understand what's going on!

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

Best explnation I have come across for the react hooks !!

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

This was a great explanation! Thank you!

@JosephLKausi 10 месяцев назад

Wow thank you, bro, now I have a clear idea on useEffect

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

Great rundown. Thank you man.

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

Thanks, you made this easier for me to understand

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

Wow, super easy to follow along, thank you for sharing this with us :) Subscribed!

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

Thank you! Such a great tutorial!!

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

Very simple explanation, thanks!

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

Awesome explanation. You made my task easy

@dystopian_1 9 месяцев назад

Very nice, brother... Thank you!

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

Incredible help, thanks Kyle!

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

Thanks Kyle, Amazing tutorial

@darkdevilxy457 Год назад

I have to say this is the best explanation of react hook

@sambacarlson Год назад

You are a Genius man! 💯👌and you really really know how to explain. Thank you man

@bama2619 2 месяца назад

Great explanation. Thank you. I am your fan

@Nst337 Год назад

really good explanation man..u helped a lot thank u so much..

@receptaylanhan Год назад

Thank you Kyle so clear explanations.

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

Thanks man, you save me reading about side effects in the docs haha :). Cheers.

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

Your videos are too great, I have no words to thank enough.👍👍🙌🙌

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

Hi, I am a beginner of React and your videos are really helpful for me! Thank you a lot! And I wonder if you would be willing to make the automatic captions on? That will be friendlier to the foreign audience like me🙇‍♂️ Thanks for your amazing videos again.