React State Vs Props

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

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

50% 1

One of the most confusing topics when first learning React is when to use state vs props. They seem to both do very similiar things, and many times look like they are used interchangeably. In this video I will be explaining in depth the difference between state and props in React, so you can understand exactly when to use them. I will also be using specific examples to explain when to use state and when to use props.
🚨 IMPORTANT:
Full React Course: courses.webdevsimplified.com/...
🧠 Concepts Covered:
- State in React
- Props in React
- When to use state vs props in React
- The difference between state and props in React
- Where state is managed
- Where props are managed
🌎 Find Me Here:
My Website: webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#WebDevelopment #WDS #JavaScript

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

29 июн 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@monicatoro2286 Год назад

I'm a Spanish native, not an English native and I still was able to understand what you explained way better than the explanations in my own language. That's how well you explain things. Thank you very much!

@ujjawalbindal231 Год назад

Hey there

@pkpkpkpkpk669 Месяц назад

timestamp for when Kyle blinks: 1:13 2:01 (3 blinks) 2:06 (2 blinks) 4:37 (kind of only really a half blink but I'm counting it) 4:55 PS thank you Kyle for making all this content, it's been extremely helpful in my coding journey ;)

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

bro i just noticed that you literally never blink. but good video. thank you !

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

WDS robot confirmed. In all seriousness, though, great video. I'm learning alot from you!

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

I just see it and come here to leave a comment about it !!🤯🤯 he doesn't show much emotion too🤔 do you think he reads script?

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

Or maybe we blinked the exact same time he blinks

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

I noticed that too and I thought I would find it disturbing.... but I love it. It's like he wants me to understand him as badly as I do.

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

I'm learning React now through an online bootcamp and was struggling with when to use either State or Prop, but this video really helped me to understand the difference. Thank you!!!

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

Dude you're killing it !! I've started learning React very recently and every time I get stuck I look it up on your channel and your explanations are so damn accurate , Thank you so much :)

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

Same

@igorfabris6067 Год назад

Same here !

@khashayarghavami7573 Год назад

Yeah he is so good

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

Thanks so much mate, I couldnt understand the concept of state until I watched this. You're a star🌟 🙌🏽

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

Yes, he's great. was hoping for an example, but thanks for the break down

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

Another great video clearing the basic doubts, which create a lot of trouble later on if not understood well. Thanks, Sir Kyle.

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

Nice explanation. I just started the react documentation and am working through the tic-tac-toe demo project. The difference between these didn't click until I heard your examples. Thanks!

@Optimized_Finance. Год назад

As usual, top-quality content, I was hoping to see some code to that effect. Thanks for the work you do.

@equu497 Год назад

I'm a backend guy but occasionally I have to do a little front end work. You have been an incredible asset to me in my journey and I wanted to thank you.

@miss_q6917 Год назад

started using react at my job and I was struggling with this, thank you soooo much!! Your videos are always excellent!

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

This video is so underrated...Beying the most important functions in React JS. Thanks Man!

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

Who else liked the video before watching because he knows Sir Kyle will surely deliver. I can't wait for the #React Course commencing on 10th Sept. 2019.

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

Thank you so much for the support. I am so nervous and excited for the course to release.

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

I also liked the video.

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

@@MaxProgramming lol

@tiffanyrogers5979 Год назад

Who else liked the video before watching because SHE knows Sir Kyle will surely deliver. 👩🏼‍💻

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

I FINALLY UNDERSTOOD THIS, YOU'RE AMAZING

@Blindmin Год назад

his unblinking gaze is piercing my soul

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

Aaahh thank you so much for this easy explaination I was really confused because everyone was saying it's confusing but you explained very well have a good day

@sixft-guy 3 года назад

Really helpful video, explain with code examples just a suggestion. Thanks!

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

Wow! Great explanation! Thanks!

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

this is really helpful, thank you

@jaywalker. 4 года назад

This helped, man. Thanks!

@allenhansen881 Год назад

It helped me understand better when you used the JavaScript passing in arguments into functions example. I have a better understanding now thank you!

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

Thanks!!! waiting for react course!!

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

Thank you for the support! I cannot wait to launch the course.

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

Your videos are just amazing, thanks a lot.

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

Someone please give me exact time when he blinking his eyes

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

lol.

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

1:09

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

I see he's not blinking he's squinting to water his eyes, smart him

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

2:07 even when he blinks, he doesn't close his eyes!

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

This commend shouldn't be allowed to be on top... I couldn't focus on anything but his eyes after reading this xD

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

Every time I watch your videos, every time you amaze me with the quality of content ✌✌

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

Thank you so much!

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

@@WebDevSimplified real inspiring, like me a self taught developer.

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

Thanks! Planning a length/unit input textbox. Form will have several u/l input textboxes + two radio buttons "mm" or "inch". Will also have a checkbox "dual units" which displays after initial unit in brackets. Example: "inch" and "dual units" selected textbox displays: 1.00in [25.4mm]. User can enter various units and it will convert to selected unit. Base unit will be meter. Still trying to figure out how this all goes together. Looking forward to class!

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

That sounds like a really interesting UI that will be perfect for React. I hope everything works out for you.

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

Awesome video as always! 👍

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

Thank you!

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

Awesome explanation, thanks!

@andreiabasile9853 Год назад

Thank you so much for the work you do!

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

Great explanation, thank you!

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

Simple as promised thanks man!

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

You're welcome!

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

Nice simple explanation, thanks.

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

You're welcome!

@a.durgadevi8052 2 года назад

Awesome explanation 👍👍

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

Great video by the way. Thanks

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

nice channel keep up the great work

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

great explanation!

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

You should demonstrate the stuff you talk about

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

Very clear bro.

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

Thank you it really helped :)

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

Thank you! One thing I have never understood, why are props called props instead of function argument when they seem identical, what differs?

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

this dude literally doesn't blink

@alialrahem9817 Год назад

As you mentioned prop as argument inside the function as it only read not change arguments but state is an action to change props

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

showing examples that one component utilizes a prop as its state would be great

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

I am such a visual learner this would have been aces with an example. Good stuff though just grabbed the transcript and read it 10x's.

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

great video thanks

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

Thanks so much!!!!

@rajkumar-nq2te 4 года назад

Thanks Kyle ♥️

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

You're welcome!

@tigana Год назад

If we're handling form input in a parent component, would you pass state as props?

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

your staring into my soul haha, good video btw

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

Thank you!

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

you win. here is my sub.

@niranjanwagh5767 Год назад

This channel is amazing. But, I was hoping for a demo with code. Please remake a video on this with a demo if possible. There aren't many videos on this.

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

thanks man!

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

better if you add codes at graphs or any visual aid while explaining. It's extra work but it ca ngo a long way

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

Holly shet, THANK YOU! I get it now.

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

Quick and simple

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

Thankyou so much :)

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

ty so much!

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

it did not props at first but later on it surely did!!! thanks

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

Great Tutorial on when to use State vs Props. Thanks, Kyle {2022-02-26}

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

I had a staring contest and I lost.

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

😂😂

@Cubannerd Год назад

I have a question. Can I store all the props in an external js file then import that file into the js that is going to render the component?

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

Hey, nice explanation. How can I map my components with the array. Like every time a user signs-up, the get user request via axios brings an array of users as serverResponse. Now I want that my Card component should pick every user and replicate the card with their respective details on a different page. Let's say Home page, window.location.pathname === '/home. Moreover if I can skip the loading and make SPA using withRouter. I think I haven't explained it well like what I want, but I hope you will get it.

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

THANK YOUUU

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

Thank you so much. Muito obrigado. Muchas gracias.

@INN-israel-news-now 3 месяца назад

it would be usefull if you explain it with an example into the code

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

iam in love with the videos of you

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

Sir. You're da best

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

Oh Kyle. Kyle.. Kyle... Kyle.... You're just awesome :)

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

Thx bro

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

Thanks bud

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

Great explanation dude.

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

Thanks!

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

can u please nesxt time code this concepts along in the video so it can be more clear and it would more simple to give examples

@some5794 Год назад

but you lose the props when you refresh the page. How do you make it persist?

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

would be better if you used example code ,still awesome!

@titulion Год назад

He does not blink holy

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

Why would you need to change the props of the component outside of it?

@srdjan02 Год назад

great tut... Just one question. how come you are not blinking... AT ALL? :)

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

I really like your voice and explanation, but, I'm missing some visuals. Just a still image of some code, showing what you're talking about would help a lot. Thanks!

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

Wish the course would come out earlier! Btw, i have subscribed, but is the supposed to be a feedback e-mail "subscription succesfull"? Havn't seen

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

I still have a few things I need to finish up before the course is released. You should have received an email when signing up. You may want to check your spam folder for the email, and it you do not see it there you can email me directly using the email listed in the about page of my channel and I will ensure your email made it on the list.

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

Greate sir

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

This dude is like a robot.

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

I love you :D

@user-gv5pf5ke4n 3 года назад

Wow you never blink your eyes

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

How do you pass a State in as a prop though

@a-roh5039 4 года назад

More react please!!

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

I plan to make a lot more React videos

@a-roh5039 4 года назад

@@WebDevSimplified Thank you! I've loved your content, you're a great teacher.

@barataapsii2466 3 месяца назад

some illustrations and analogies would go well with your explanations

@mo-zr2tk 8 месяцев назад

he doesn't blink

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

i dont understand...could you show w/ visual

@rjlamarti Год назад

just cover them eyes man im possessed

@nairinsalot4370 Год назад

hey guys can we pass prop and hide element..

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

is there any discount? right now its 60$

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

Aaaaaaaaaah I'm really starting to regret my decision to learn web development. I can't get react.

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

What about React is confusing you. Maybe there is something I can help explain. I also have an entire React course that covers React from the beginning which may be interesting to you. courses.webdevsimplified.com/learn-react-today

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

first and foremost, why regret? if learning web development in general is a kind of your passion over salary perspective, then you do not think about time to spend in learning it, but regretting without a goal or success on learning it, then better to start finding what is your REAL passion. I can say it is broad to learn by doing and learning all those stuff you need, a good foundation is to focus on (basic fundamentals --> required). I was also like you before, but realising the needs of combining tech/dev/ops perspective which is demanding for the next 10 years of time, i embraced it with pride of learning and nurturing bit by bit, like in book, cover by cover.

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

@@nathanunderbsd5972 My real passion doesn't put food on the table... Anyway that was just a knee jerk reaction out of frustration, I didnt mean it. I like web dev, despite all the frustration that comes with it, but I also can't wait for the day to not have to do it anymore lol.

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

@ZenCoder that's the plan... Until I find that thing I still need to live so...