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.
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!
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
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
Sir, this should be my first ever comment on UA-cam and I just want to say that I totally loved this video. I wish I could leave 10 likes all at once. Thank youuuuuuu
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 :)
'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?
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?
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!
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?
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."
@@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!
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.
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.
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.
Wow sir tht was an amazing tutorial, U hve just rocked sir, Sir ihve one request plz keep making interview tutorial like this on react, Tqu sir lots of love and support from india 🇮🇳
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!
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?
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
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.
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.
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!
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
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 am sure every viewer will learn something valuable from this video. Looking forward to more content.
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 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
its kind of learning entire core react concept in minimum time possible. Great content.
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.
One of the best React tutorials out there, and I've struggled with 'em all.
every answer with a code snippet... tats what makes this video amazing and a lot easier to understand... ThanQ.. Happy Coding..
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
Sir, this should be my first ever comment on UA-cam and I just want to say that I totally loved this video. I wish I could leave 10 likes all at once. Thank youuuuuuu
Thanks
You are most welcome! Thank you for supporting the channel!
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
Best video I have found so far, helped me getting prepared for my interview so well.
Glad it helped!
Love the part about keys. Now I understand why. I knew it was not good for performance but didn’t know why
great explanation, never really had understood unidirectional data flow in react, you made it easy. Thanks
This guy knows his stuff. I really enjoyed the video!
Thanks! Glad you enjoyed the vid
one of the best teachers I ever seen
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
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 !
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
Fantastic video with basics at one place
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 guy deserves a medal
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
Great content. Clear and concise explanation and examples. Well done.
You really give great explanations on crucial topics of react. Thank you!
This guys is awesome in his explanation
This was so helpful. Thanks. do you have a video explaining Hooks and why they are useful and why are they needed?
'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?
Great video, solid explanation on prop drilling and useContext.
Very easy to understand with examples. Thank you
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?
Thanks Chaim! Looking forward to your future content
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
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
Thank you so much. The info was clear and precise and it helped me clear some misconceptions too ! Great work!
Excelent content and you know how to explain it clearly. Great video!
Wow , your the 1st one i didnt have to speed up to 1.5x . Good 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?
This video is so detailed and very nicely explained. Thank you!
Great video, detailed explanation of everything, easy to understand. Just have to slow it down to 0.75x
Thank you!
Liked the detailed explanation. Really helpful. Specifically key and context. It gave me clear idea
I really liked your explanation about using n.id instead of index in key attributes. Amazing stuff.
Super insightful!
This is very helpful interview prep. Thank you!
Glad you found it helpful
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!
great video Chaim, learned so much!!!
This is really video, the concepts are made clear. Thanks Chaim. Love from Oman.
You are most welcome
fantastic video. Thorough explanation and a good choice of questions :) Thank you
My pleasure! Very glad you’ve found it helpful
Awesome content and up to date. Love it!
Thanks!
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 for the great examples, I learned a lot! Going to your next video :)
Very insightful and full content 👌 👏
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!
Great Content !!! Thank you ..Hope to see more videos like these
Great questions and excellent explanation! Thanks for sharing
Really glad you enjoyed!
You're a great teacher. I'm learning react and couldn't grasp certain concepts until now. Do you have a react bootcamp?
Loved it!
Thank your for this amazing React tutorial!
wow you seem to be really an expert at React
Leaved a like to watch/understand later
Thanks, good sir. I've learned a lot from this one 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
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.
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.
This....is.....Amazing. SUBSCRIBED
You should have a counter how many times you say "actually" . Joking aside, great content.
Wow sir tht was an amazing tutorial, U hve just rocked sir, Sir ihve one request plz keep making interview tutorial like this on react, Tqu sir lots of love and support from india 🇮🇳
Nice! Thanks
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!
It's an amazing interview tutorial.
Great video and explanation, thanks!
Glad it was helpful!
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
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
is context like store?
is this a good idea to use index for key in list item?
omG I had to set the video to 0.75 haha. Very cool btw, thank you
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
Great Explanation
Thank you!
Thanks for this wonderful video.
8:15 Line 23, no wonder that the component is out of control. :)
Pure Gold 😍
Can we use context in any part of the code or it has to be in a particular tree?
Can be used anywhere
Great 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
Good to watch at .75x speed
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
this was helpful
Love your vids! if you could talk a bit slower that would help a lot to follow
Thank you for the feedback! Glad you enjoyed the video
Just play video in 0.75
Your answer to unidirectional flow is wrong. You are getting unidirectional flow mixed up with one-way binding.
same thing
Those are good interview questions, but the explanations are lengthy and hideous, wish it could be shorter and right to the point
A-w-e-s-o-m-e video