Here is my humble contribution: 0:40 - Unidirectional Data Flow 3:05 - Props x State 4:53 - Lift State Up 7:05 - Controlled x Uncontrolled 9:46 - Refs 12:21 - Importance of Keys 17:58 - Context For whoever is reading it: You have gotten so far! You are gonna get the job just believe in yourself! 😊
This is a great video! No non-sense. I'm a pretty experienced React developer and I can confirm that these are actually things that you're going to need in your work.
0:39 What does unidirectional data flow means? 3:07 What is the difference between props and state 4:50 What does it mean to Lift a State Up? 7:02 What’s the difference between Controlled components vs Uncontrolled components? 9:45 What are refs in React? 12:20 What are keys and why are they important when rendering lists? 18:03 What is Context?
One of the best videos I've seen and I've been already a month preparing for interviews after 6 years of working with React already, but now I want to change to work another place
This was extremely helpful in reaffirming my React knowledge. I've been using it for a while in personal projects and I just found out my company is looking for a React developer. Brushing up in hopes of landing the promotion! Thanks for the video!
Fantastic set of questions, one thing worth mentioning in relation to Q1 is that it is also referred to as "1 Way" and "2 Way" data bindings, as per the given example, React is 1 way data-binding and Vue is 2 way data-binding. Thanks for sharing
I agree with others, you've explained things very nicely. I've been using react for a few years and not using the index as a key is important but I've never really dug deeper into it. The way you've explained it, with an example, really clicked! Keep it up!
You helped me get my current job, every question you mentioned was brought up and I was able to elaborate, you made the concepts make sense to me. I cannot thank you enough. I’m now a lead dev for a new project, loving my job!
I never fully grasped the difference between controlled vs uncontrolled component, but you explained in two minutes what seemed obvious and other documentation I couldn't.
@@mz6958 The recruiter made a mistake and said the role required a bachelor's in Computer Science. I got a job elsewhere though and I learned a shit ton already. But then it moved to part time because it is an early stage startup that lost funding, so now I'm considering updating my resume because I'm only gonna be working 10 hours a week at this job.
@@e_tas_ Damn, that sounds like a rollercoaster. I guess if you will only be working 10 hours a week you'll have a lot of time for applying to new jobs though, right? Wish you the best of luck with it! I have my technical interview on Wednesday
'Lifting State Up' question : You didn't mention the main point that I think is the core to the answer to that question - When we lift the state up then we call a method in the child component that in turns calls the reference to a function that was passed as a prop to the child from the parent component. This is done in order to update the state in the parent component because updating the state of parent component cannot directly done in child component. In this way we kind of lift the state up from child component to parent component which ensures that parent is aware of the fact that child is requesting the state to be changed potentially because child relies on the updated value of that state. I am not able to understand your point for this particular question in the video. Could you please explain?
Not in all cases is it bad. This really is only an issue with a data set where the order of items can change, like for example if you delete an item. In a case where you simply render the list, index is ok
Excellent video!!! I am learning React JS and I have found the video very informative, especially when you go over the snippets and explain them thoroughly. Great job, thumbs up 👍
You're probably the smartest instructor I've ever seen. Everything you say is to the point. One suggestion thought, maybe consider making the pacing a bit slower :)
17:28 , if we use index as keys in the list( not recommended ) , and delete a certain element of the list , does react delete it from the actual DOM rather than the virtual DOM ?. Is that the reason why the whole list gets refreshed ? please elaborate
In your "Controlled vs Uncontrolled" question : Would your input reflect the keypress changes in case of Uncontrolled component? This part is not shown in the video.
You have a talent for explaining things! Keep doing this. I have a question: what level are these questions? Say I'm someone with almost 2 years of experience. Is this what I should expect or this is something that a more junior/entry level dev would be asked?
Sir, this should be my first ever comment on RUclips and I just want to say that I totally loved this video. I wish I could leave 10 likes all at once. Thank youuuuuuu
It's crazy how many of these questions I was asked in a recent interview, and I couldn't give convincing answers. If only I had gone through these 14 questions before. Great vid nonetheless, and I found the JS playlist equally helpful. Thanks again!
This is technically correct. The fact that data travels down from parent to child and not back up from child to parent, is indeed another form of Unidirectional Data Flow
I believe this SO thread can help you get some clarity on the topic as it was discussed in this video stackoverflow.com/questions/34519889/can-anyone-explain-the-difference-between-reacts-one-way-data-binding-and-angula
Do you necessarily have to use "refs" to get the underlying DOM element, can't you use document.querySelector() for that. I am new to react. Would love an explanation.
@@CodingWithChaim just did exactly that! i took a course with stephen girder on udemy and he covered sooo much of this stuff (really great course and extensive) but hearing it all rephrased through your words makes it easier to form my own way of phrasing this all now as well! loved your explanation of unidirectional and the reconciliation model... never heard of that before!
Love this video. A lot of my React learning has come from Udemy there's so much of this that I've learned how to do, but never really understood the "why."
React literally took me 6 weeks to become an "expert" at. It's insanely simple, especially coming from doing Angular for many years. React was a damn joke to pickup. Angular does pretty much everything in a far superior way, except for how React handles state. I do like the new State stuff in React way better. But the biggest thing that really hasn't taken off in React world which funny enough is called Reactive Extensions. Far superior for handling real time data, way more efficient to have data pushed to you vs. polling.
Hello, i am new and im not sure about seniority levels yet, i wanted to know if you are considered Ssr or Sr or Jr, i would appreciate a reference, thx!
Hi Chaim, I have a question about context What if i have grandchild component in a separat file than how would i get the access to Context that you have declared globally at line no. 4?
Did I miss something here? What actually happens when a user types something into the input field of the uncontrolled component and then hits the button, that this component has? Otherwhise..great content, really gives me some insight!
A lot of projects require skill to work with datepikers, but there is no good tutorials for this topic.. Is it possible to create react tutorial, kind of "How to use complex datepicker" for example from airbnb, and to create really complex, for example two/three open calendars eith tooltip on every day/date and info in that tooltip.
does this actually apply to working students? How much would a potential employer expect of a 3 year cs student, who applies for a working student front end job, to know? The description says more or less that some experience in html, css and javascript is required and some experience in react would be a nice to have. Would it be sufficient to know the basics such as react hooks, some statemanagement such as context api and some things such as function based and class based components and their differences? I applied to a few jobs and not sure what to expect. Thanks in advance
I think its fair to say that you should be prepared for it to be tough to get that first job right out of school. Thats not to say you should not apply, and also not so say that you may have it easier than expected. Sometimes employers are just looking for someone who shows potential and they are willing to let this candidate learn on the job. Other times, they may be looking for someone that already knows and is already proficient their tech stack. Its hard for me to really say what you should be prepared for because it varies heavily from company to company and even with in a company from team to team. I would say prepare for it to be harder than you think, but you may be in for a surprise and have it go smoothly! Either way, no matter how hard it gets, its important to not throw in the towel as tempting as that may be, and from experience I can say that it can be tempting.
Here is my humble contribution:
0:40 - Unidirectional Data Flow
3:05 - Props x State
4:53 - Lift State Up
7:05 - Controlled x Uncontrolled
9:46 - Refs
12:21 - Importance of Keys
17:58 - Context
For whoever is reading it:
You have gotten so far! You are gonna get the job just believe in yourself! 😊
I have an interview today. Your comment really helped. Thank you.
This is a great video! No non-sense. I'm a pretty experienced React developer and I can confirm that these are actually things that you're going to need in your work.
0:39 What does unidirectional data flow means?
3:07 What is the difference between props and state
4:50 What does it mean to Lift a State Up?
7:02 What’s the difference between Controlled components vs Uncontrolled components?
9:45 What are refs in React?
12:20 What are keys and why are they important when rendering lists?
18:03 What is Context?
One of the best videos I've seen and I've been already a month preparing for interviews after 6 years of working with React already, but now I want to change to work another place
This was extremely helpful in reaffirming my React knowledge. I've been using it for a while in personal projects and I just found out my company is looking for a React developer. Brushing up in hopes of landing the promotion! Thanks for the video!
Fantastic set of questions, one thing worth mentioning in relation to Q1 is that it is also referred to as "1 Way" and "2 Way" data bindings, as per the given example, React is 1 way data-binding and Vue is 2 way data-binding.
Thanks for sharing
I agree with others, you've explained things very nicely. I've been using react for a few years and not using the index as a key is important but I've never really dug deeper into it. The way you've explained it, with an example, really clicked! Keep it up!
You helped me get my current job, every question you mentioned was brought up and I was able to elaborate, you made the concepts make sense to me. I cannot thank you enough.
I’m now a lead dev for a new project, loving my job!
Wow!! Congrats! So glad my videos helped. Appreciate the comment
I never fully grasped the difference between controlled vs uncontrolled component, but you explained in two minutes what seemed obvious and other documentation I couldn't.
I am sure every viewer will learn something valuable from this video. Looking forward to more content.
One of the best React tutorials out there, and I've struggled with 'em all.
Fantastic video, I use React every day and your explanations were so good that even I learned something new! Keep up the good work!
Thank you so much! I appreciate the feedback!
I have my first front end technical interview and the material from this video was exactly what I needed, thanks
how did it go?
@@mz6958 The recruiter made a mistake and said the role required a bachelor's in Computer Science. I got a job elsewhere though and I learned a shit ton already. But then it moved to part time because it is an early stage startup that lost funding, so now I'm considering updating my resume because I'm only gonna be working 10 hours a week at this job.
@@e_tas_ Damn, that sounds like a rollercoaster. I guess if you will only be working 10 hours a week you'll have a lot of time for applying to new jobs though, right? Wish you the best of luck with it! I have my technical interview on Wednesday
@@mz6958 Yeah hopefully it won't be too much of an issue since I have about half a year of work experience
I alway watch this kind of video by using 1.25x. but this time I need to a little bit slow it down. Anyway, thanks for sharing these knowledge.
same here! sometimes I use even use 1.75 but this video I used 0.75 lol. I'm glad I not the only one
lmao n00b me i used 2.5x
Can confirm
Same here
Thanks
You are most welcome! Thank you for supporting the channel!
Love the part about keys. Now I understand why. I knew it was not good for performance but didn’t know why
every answer with a code snippet... tats what makes this video amazing and a lot easier to understand... ThanQ.. Happy Coding..
its kind of learning entire core react concept in minimum time possible. Great content.
I've learned more in 12 minutes than all the hours I've spent o tutorials. Thank you so much definitely got a new subscriber
Happy to help
great explanation, never really had understood unidirectional data flow in react, you made it easy. Thanks
'Lifting State Up' question : You didn't mention the main point that I think is the core to the answer to that question -
When we lift the state up then we call a method in the child component that in turns calls the reference to a function that was passed as a prop to the child from the parent component. This is done in order to update the state in the parent component because updating the state of parent component cannot directly done in child component. In this way we kind of lift the state up from child component to parent component which ensures that parent is aware of the fact that child is requesting the state to be changed potentially because child relies on the updated value of that state.
I am not able to understand your point for this particular question in the video. Could you please explain?
Sweet, I finally get why keys are important, and I'll stop with the key={i} just to quiet warnings
Not in all cases is it bad. This really is only an issue with a data set where the order of items can change, like for example if you delete an item. In a case where you simply render the list, index is ok
Best video I have found so far, helped me getting prepared for my interview so well.
Glad it helped!
Man you are special my brain had to be 💯 focused and not even for a single second I got bored.
I am so glad I discovered your channel - thanks for doing such an amazing job explaining everything with so much detail !
This guy knows his stuff. I really enjoyed the video!
Thanks! Glad you enjoyed the vid
Excellent video!!! I am learning React JS and I have found the video very informative, especially when you go over the snippets and explain them thoroughly. Great job, thumbs up 👍
You're probably the smartest instructor I've ever seen. Everything you say is to the point. One suggestion thought, maybe consider making the pacing a bit slower :)
This was great ive been learning a lot of react past 6 months and you cleared up a lot. Thanks!
My pleasure! I’m glad you find it useful
Very easy to understand with examples. Thank you
17:28 , if we use index as keys in the list( not recommended ) , and delete a certain element of the list , does react delete it from the actual DOM rather than the virtual DOM ?. Is that the reason why the whole list gets refreshed ? please elaborate
one of the best teachers I ever seen
In your "Controlled vs Uncontrolled" question : Would your input reflect the keypress changes in case of Uncontrolled component? This part is not shown in the video.
This was so helpful. Thanks. do you have a video explaining Hooks and why they are useful and why are they needed?
You really give great explanations on crucial topics of react. Thank you!
You have a talent for explaining things! Keep doing this. I have a question: what level are these questions? Say I'm someone with almost 2 years of experience. Is this what I should expect or this is something that a more junior/entry level dev would be asked?
Great video, solid explanation on prop drilling and useContext.
Fantastic video with basics at one place
this guy deserves a medal
Thanks Chaim! Looking forward to your future content
Sir, this should be my first ever comment on RUclips and I just want to say that I totally loved this video. I wish I could leave 10 likes all at once. Thank youuuuuuu
8:15 Line 23, no wonder that the component is out of control. :)
Thank you so much. The info was clear and precise and it helped me clear some misconceptions too ! Great work!
This guys is awesome in his explanation
It's crazy how many of these questions I was asked in a recent interview, and I couldn't give convincing answers. If only I had gone through these 14 questions before. Great vid nonetheless, and I found the JS playlist equally helpful. Thanks again!
Hopefully this helps you ace your next interview
Great content. Clear and concise explanation and examples. Well done.
I really liked your explanation about using n.id instead of index in key attributes. Amazing stuff.
Very insightful and full content 👌 👏
I thought unidirectional data flow meant that the data flows downwards from parent to child, nothing related to state and dom. I'm confused now
This is technically correct. The fact that data travels down from parent to child and not back up from child to parent, is indeed another form of Unidirectional Data Flow
I believe this SO thread can help you get some clarity on the topic as it was discussed in this video stackoverflow.com/questions/34519889/can-anyone-explain-the-difference-between-reacts-one-way-data-binding-and-angula
Excelent content and you know how to explain it clearly. Great video!
This video is so detailed and very nicely explained. Thank you!
This is very helpful interview prep. Thank you!
Glad you found it helpful
Do you necessarily have to use "refs" to get the underlying DOM element, can't you use document.querySelector() for that. I am new to react. Would love an explanation.
you make me smarter thank you. My react iq increases with every video thank you.
You are very welcome! Glad you’re finding the videos helpful
great. i have trouble articulating this stuff but know answers for most part. this really helped me with my soft skills!
Try writing the answers to these questions. Might help you articulate more clearly
@@CodingWithChaim just did exactly that! i took a course with stephen girder on udemy and he covered sooo much of this stuff (really great course and extensive) but hearing it all rephrased through your words makes it easier to form my own way of phrasing this all now as well! loved your explanation of unidirectional and the reconciliation model... never heard of that before!
Love this video. A lot of my React learning has come from Udemy there's so much of this that I've learned how to do, but never really understood the "why."
really glad you found this video helpful!
Thank your for this amazing React tutorial!
great video Chaim, learned so much!!!
fantastic video. Thorough explanation and a good choice of questions :) Thank you
My pleasure! Very glad you’ve found it helpful
Thanks for the great examples, I learned a lot! Going to your next video :)
Great Content !!! Thank you ..Hope to see more videos like these
Wow , your the 1st one i didnt have to speed up to 1.5x . Good video!
React literally took me 6 weeks to become an "expert" at. It's insanely simple, especially coming from doing Angular for many years. React was a damn joke to pickup. Angular does pretty much everything in a far superior way, except for how React handles state. I do like the new State stuff in React way better. But the biggest thing that really hasn't taken off in React world which funny enough is called Reactive Extensions. Far superior for handling real time data, way more efficient to have data pushed to you vs. polling.
React is hella simple, the hard part is just learning all the third party libraries that you need to make it do anything useful
Liked the detailed explanation. Really helpful. Specifically key and context. It gave me clear idea
Want some help with an upcoming React interview? Follow this link to book a 1 on 1 session with me! www.codingwithchaim.dev/
Hello, i am new and im not sure about seniority levels yet, i wanted to know if you are considered Ssr or Sr or Jr, i would appreciate a reference, thx!
Great video, detailed explanation of everything, easy to understand. Just have to slow it down to 0.75x
Thank you!
Super insightful!
You're a great teacher. I'm learning react and couldn't grasp certain concepts until now. Do you have a react bootcamp?
Great questions and excellent explanation! Thanks for sharing
Really glad you enjoyed!
Awesome content and up to date. Love it!
Thanks!
Nice! Thanks
Leaved a like to watch/understand later
This is really video, the concepts are made clear. Thanks Chaim. Love from Oman.
You are most welcome
Hi Chaim,
I have a question about context
What if i have grandchild component in a separat file than how would i get the access to Context that you have declared globally at line no. 4?
You need to export it and then import where needed
Would you make a learn react tutorial? I feel like you’re an amazing teacher and it’d help a lot
I have been toying with the idea for some time now
Coding With Chaim ahhh I would love it if you have the time! I would watch full ads and view multiple times 😂😂😂🙏🏼🙏🏼🙏🏼
Lol 😂 yea there is a good chance I’ll do it
Coding With Chaim by the way thank you for the content you are already making!
Jonah G you are most welcome
Thanks, good sir. I've learned a lot from this one video.
is context like store?
So nobody is going to talk about that sneaky "UnCunTrolled" joke he pulled out at 8:24....
wow you seem to be really an expert at React
Did I miss something here? What actually happens when a user types something into the input field of the uncontrolled component and then hits the button, that this component has? Otherwhise..great content, really gives me some insight!
is this a good idea to use index for key in list item?
Thanks for this wonderful video.
A lot of projects require skill to work with datepikers, but there is no good tutorials for this topic.. Is it possible to create react tutorial, kind of "How to use complex datepicker" for example from airbnb, and to create really complex, for example two/three open calendars eith tooltip on every day/date and info in that tooltip.
I’m gonna look into this. It seems like a fun idea for a video
It's an amazing interview tutorial.
Those are good interview questions, but the explanations are lengthy and hideous, wish it could be shorter and right to the point
Can we use context in any part of the code or it has to be in a particular tree?
Can be used anywhere
Loved it!
Plz, record tutorial "How to work with react-google-maps" with customization / markers / tooltip for markers, or just clone map from airbnb)
Thank you for the suggestion, I will add to the list
You should have a counter how many times you say "actually" . Joking aside, great content.
Your answer to unidirectional flow is wrong. You are getting unidirectional flow mixed up with one-way binding.
same thing
hi there chaim, which course do you recommend to learn react... i was planning to go with maximillian's course on udemy
That’s a solid choice he’s a good teacher
@@CodingWithChaim thanks chaim! already started , going well for now
omG I had to set the video to 0.75 haha. Very cool btw, thank you
does this actually apply to working students?
How much would a potential employer expect of a 3 year cs student, who applies for a working student front end job, to know?
The description says more or less that some experience in html, css and javascript is required and some experience in react would be a nice to have.
Would it be sufficient to know the basics such as react hooks, some statemanagement such as context api and some things such as function based and class based components and their differences?
I applied to a few jobs and not sure what to expect.
Thanks in advance
I think its fair to say that you should be prepared for it to be tough to get that first job right out of school. Thats not to say you should not apply, and also not so say that you may have it easier than expected. Sometimes employers are just looking for someone who shows potential and they are willing to let this candidate learn on the job. Other times, they may be looking for someone that already knows and is already proficient their tech stack. Its hard for me to really say what you should be prepared for because it varies heavily from company to company and even with in a company from team to team. I would say prepare for it to be harder than you think, but you may be in for a surprise and have it go smoothly! Either way, no matter how hard it gets, its important to not throw in the towel as tempting as that may be, and from experience I can say that it can be tempting.
Exceptional video, thank you.
Great video and explanation, thanks!
Glad it was helpful!
This....is.....Amazing. SUBSCRIBED
Good to watch at .75x speed
Line 23 at 8:22
UnCuntrolled
Very efficient
Great Video