React Interview Questions 2020 (7 Questions)

what's up everybody welcome to coding time would you like to ace your next react interview if you would then they've come to the right video okay so I have 14 questions that I have appeared that I would use right now if I was to try to interview a new candidate for a react position and I wanted to kind of gauge their reaction either the exact 14 questions that now in the year 2020 I would ask a potential candidate what I'm going to do is I'm going to break it down into two separate videos within this first video we're going to cover the first seven questions and then the next video which is will be next week we're gonna cover the next seven questions let's go ahead and jump into the first question the first question is what is doing a directional data flow in react right so we always know that react we I would say that data only flows in one direction what does it actually mean so to kind of illustrate that point we can actually take a look at a code example that I have right over here so you'll see here I've got a basic function called app which is just a simple component that renders this one single input right over here and then we're defining the state variable which we're creating using the U state hook and we're initializing that to be an empty stream finally down in the input I'm basically taking the state variable and I'm binding it to the value prop within the input and then on change I'm gonna go ahead and pass it this handle change function right over here but what you'll actually notice is that right now this handle change function is not actually doing anything it basically has an empty body now watch what happens when I have to try to type into this input as I try to type you'll actually see that nothing is in fact happening even if I'm trying to type into the input right and so this kind of illustrates what unidirectional data flow actually means in react whenever you're trying to actually type into the Dom the Dom itself doesn't actually update state so to contrast that you know you may or may not be familiar with you but even if you're not this concept will still kind of make sense you have something called V dash behind basically what that means that you can actually take a piece of your data such a state which they basically call it the model right and then you can basically find it to an input now the model can update the inputs in other words if you actually change the value of the of your state of your you know JavaScript value it'll actually get reflected in the actual Dom know but could also happen is if you actually updating the Dom the model also gets reflected they're basically bound in both directions which means the you can update the data or the daily connected to view but in this example here what you're actually noticing isn't a reactive that's not the case the only thing that gets reflected on screen is the value that's within your state in order if you could actually change what you see on the screen you have to change the data the screen or your Dom or in your view can never actually change the data you wanted to change the screen you got a change of data it's an order to actually fix this bug that I have right now where I can't actually type I have to actually go into my you know change handler and actually use my set state method right over here that I got out of the hook and actually pass it to he that target value and now I can actually come back here and I can start typing because basically what's now happening is I on every single key press I'm actually updating the value in state and then that state is now getting reflected in the Dom but the Dom at no point is actually updating the state that's what you're the directional data flow is so the next question is what is the difference between props and state so state is basically when a component defines data locally within itself and props is when that same data then gets passed down to another component well it's actually seen this in action right now so you'll see here we actually have a component called app happens actually to go ahead and render child and then child actually goes ahead and renders grandchild now this is actually just a sort of hangover of a snippet of code that I have for a different example which is why we actually have the app child and grandchild but the point still stands that here instead of the app component this value data that we have this value variable that we have here instead of an be a component is actually state the reason why this is state is because the app component itself is the one that basically defined it and it also actually has a set value function which means that the app component actually has a way to actually change this bit of data so effectively what that means right now what we're seeing so far is that if a component itself is defining a new bit of data within itself a that's called state to be death component can actually go ahead and manipulate that bit of data on the other hand in the child component we're basically taking this value that we have defined here at state and we're then passing it down to the child component the child component can then go ahead and access that using the props argument that gets passed into it so basically in order to access this value we have to go and say perhaps that value so what this shows us now is that perhaps is when that same bit of data gets passed down to another component the receiving component and now is receiving the data as something that is called props so props is there that gets passed into another component and the fundamental difference that exists between props and state it's a state can actually be changed manipulated and mutated whereas props cannot be changed in order for you to change props you have to actually have your child's component to go back and call up to the parent component to ask the parent to go ahead and change that bit of data the next question is what does it mean when we say in reactor we're gonna be lifting state up right the react documentation actually talks about this concept of lifting stayed up what does that actually mean to kind of see this in action let's take a look at this code snippet right over here so what you see again is they have a basic app component that is rendering a list component and an item count component oh so the app component is gonna go ahead and initialize an array of random strings foo bar and Baz which are then basically passes out to the list component let's can fund will accept this via props and then just go ahead and render foo bar Baz right on screen then we also have the item count component which is also trying to utilize this actual items array that we have on stake right over here so in other words the list the list component is actually taking the entire items array and rendering each individual item out what the item count component is doing it's actually just trying to render the number of items that we have by simply saying item is not linked so what other was trying we're just trying to render the amount of items that we have within this particular array but the point here is we actually have two child components which are kind of siblings one to another and what they're both relying on is the same bit of data in order for us to actually make sure that they can both we line up same bit of data and sort of staines think without us having to sort of manually do any kind of logic to keep them in sync what we can do is we can basically make them siblings under the same component and that's exactly what I've done right over here the app components both the renders the list component as well as the atom count component and so now what ends up happening is since they are both sort of subscribing to the same bit of state that lives here inside the app component this items are rate never in sync by default because whatever happens to the items array is gonna happen both the list component as well as the item count component so effectively what lifting steak basically means if you ever have more than one component that's trying to share the same amount of bait or the same bit of data and another component take both of these components that want to share this data put them together a siblings insider another component that lives on top of them so you might have like some kind of a parent these two are going to be the same children of the same parent component so in other words here item and item count or list and item count are both children of the same parent component therefore they can both utilize the same bit of data and they're gonna basically be in sync by default because they're using the same bit of data the next question is what's the difference between a controlled component and an uncontrolled component so let's actually take a look at another code snippet to kind of see what the difference between these two are so let's see here I have the app component that's rendering the controlled component and then as well as an uncontrolled component let's take a look at the controlled component first and this one should seem pretty familiar to you if you've written react for any amount of time basically all we're doing is we're rendering an input component that's gonna be bound to this bit of state butterbeer so now that we're using the you state hook to the fine state we're starting it out as an empty string this state now is just an empty string we passed this state down as a value to the input so effectively this this input is now tied in this bit of state and then we have the unchanged function every single time you're basically typing into the input we're gonna go ahead and call set state with the init targeted value effectively updating the value of the state and then finally we have a button that simply says click me so for whenever I type into the actual input right over here I can click it and then I simply get an alert that actually gives me the output of what I've just typed into the input so this is a controlled component on the other hand in uncontrolled components basically where you're not actually binding a bit of state to your component so here in this input component back on the control component per second the input is actually bound to this stage value whatever the value is inside of the state variable that's what's gonna get reflected in on-screen that's what the input is actually gonna displayed so the input is effectively tied is being controlled by the data on the other hand in the uncontrolled component what you'll notice is this input over here doesn't actually specified neither a value nor a non change it's not actually bound to any bit of data that's what an uncontrolled component is so again a controlled components bound to data whereas an uncontrolled component is not bound to any bit of your state or it doesn't have any kind of unchanged then the question of course might be how might you actually get this value out of non controlled component and the answer is that that's where reps might actually come in handy so basically a ref is basically going to be the sort of ask a patch so you could attach the underlying input and by the way I actually have a video sort of exploring risk in more detail if you want to take a look at that I will leave a link to it down in the description box below but the basic idea here is that what we're gonna do is we're gonna take this input ref and we're gonna pass it to this ref actually right over here so now what happens is in this alert value function instead of having that they got the value of state what we can do is we can actually get a hold of the underlying Dom node and simply read its basic JavaScript property known as that value to actually get underlying value out of it so again this is an under control component because it's not actually bound to anything in state this is a control component because it's literally being controlled by your state okay so this next question actually touches on a topic that we've sort of briefly touched on before and this is basically what our rest and react right and so to kind of see what refs are we can actually take a look at this little code snippet that I have right over here and again just as a reminder if you want to see more about refs actually I have a video dedicated just to that topic but to take a look at what reps are here what we're doing is very simply we have a simple input component or a simple input element that were running right over here we're creating an input ref using the use ref folk and then what we're doing is we actually have every JSX element actually has its ref attribute that you can basically pass a ref so in other words whatever ref you're actually creating from within the use red hook you can take that exact variable that you've created and then pass it to this ref attribute on the JSX elements and then what this allows you to do is to kind of actually give you an escape patch to start manipulating and interacting with the underlying Dom node so that's really quickly they're there basically is that us as react developers so we're not really talking to the actual Dom we're sort of more developing against the virtual Dom but in certain instances we actually want to get a hold of the underlying Dom node we want to kind of bypass the virtual Dom and manipulate the actual underlying and so react kind of gives us this escape path known as rest it kind of allows us to do this one such example where you might actually want to do this very thing is when you're basically trying to set focus to an input you'll see right over here I have its input or if I click into the input the actual outline around the input turns blue now what I would actually like to do is I would like to programmatically set focus in this input that in other words as soon as the user actually comes to the screen without them actually having to click into the if but I want to already be set focus programmatically cue my own code and it turns out in regular JavaScript this is very easy to do you can just call the dev focus method in order for us to do this in react we basically have to use a ref to get a hold of the underlying Dom node and then on the underlying Dom node go ahead and call the focus method so let me show you that in code right over here we can just go ahead and combat this bit of code we're gonna go ahead and say input ref that current if you want to actually get a hold or read out the value that's actually being stored inside a ref you have to actually use the dot current property so every single ref that you create using the user s hook actually has the property and called that current which basically stores the actual value at this point inside of the use of fact this already happens after the component that's been done rendering so now the input has already been you know mounted into the Dom it's now input ref that current will actually go ahead and represent my actual underlying Dom know the actual input and I can just go ahead and call focus on it and now if i refresh this iframe you'll now see that it without me actually having clinton to click into the actual input you'll already see that it actually has the blue outline and it happened because i called focus on the actual input itself okay so this next question is what are keys and why are they important when we're trying to render list of than react and so basically to answer that first of all what are keys so whenever you try to actually iterate over an array of items to try to assert in other words let's say you have an array of cards and for every single car you want to kind of go ahead and create a new ally with it and you're you well to kind of you know render out the list of all the cars you might have with the new array what happens is from each Li you have to basically give it a unique key unique key identifier right so that's what the keys are it's a way for reactants were to be able to uniquely identify each individual item within your race in other words instead of reactive look at the data to identify each item and actually looks at the key that you have given Eastern the visual ally within your ul and that sort of can uniquely identify this now why is it important to kind of see why this is important let's actually take a look at a snippet of code that we have right over here so what I've done is I basically created a data array now I actually have determined be console open for set for an important reason so let's get to that in just a second but basically what we have is a simple data array I have a for loop where I'm kind of iterating over until the number 10 and then for each one I'm going just gonna go ahead and push them the actual number sort of basically create an object that's gonna have two properties on it the number which would just be I and then we're gonna have a ID which is just basically be the you know string ID plus the actual number so that's gonna give each one a unique ID okay and then very simply in the app component we're just gonna go ahead and take this data array that we just initialized and we're going to initialize our state variable to be equal to this data array that we've just created within that for loop and now what happens is down here we actually go and we iterate over the array so we're basically gonna go ahead and say state that map and then for each one we're gonna go ahead and render this item component and then right now the key is actually set to end that ID but let's actually change that and make it so that the key will actually be equal to the index because this is actually a pretty common pattern that a lot of people do and it's actually wrong the react documentation very much recommend that you don't do this and we're gonna actually see exactly why it's important not to use an index but to actually use some sort of unique identifier for each individual key but right now let's actually do do this example we're actually gonna use the index as a key and it's also important to note that if you ever forget to specify the key we actually basically just give you a warning that say it's hey by the way you forgot to give me keys so what react is gonna do is by default just go ahead and use the index anyway so but you actually supply the index or leaving off the key internally the result will be the same and that can sometimes have somewhat detrimental effects as we're soon gonna see right so then what's gonna happen is we're gonna go ahead and render this item component the item component has an h1 that simply renders the props that number and then if I click on the actual h1 it's gonna go ahead and call the delete function which are basically passing down bigger props and all this delete function does is it accepts the ID of the of the individual number we filter it out from the and effectively we're gonna go ahead and delete that individual item now I want to basically show you is as follows if I actually come here to the e0 with element or another as the first element within the array the number 0 now watch what happens maybe let me just make this a tad smaller now watch what happens to the entire list right over here in the Dom element so your eye should be focused here I'm gonna go in and click on one of these elements I'm gonna delete it and watch what happens and you noticed how pretty much everything flashed purple basically what that means is that everything right now inside of this entire list got repainted on the screen but if I make one small change let's now no longer set the key to be equal to the eye let's rather have the key be equal to end that ID right now let's go ahead and refresh this iframe browser and now once again your eye should be focused here on the actual elements within my console I'm gonna go ahead and once again only delete the zero with elements within the array and I watch as you can see that literally only that bit flashes and pretty much nothing else flashes so what actually happens well as it turns out react when it actually tries to make changes to the actual Dom it tries to do this in the most efficient way possible right so this is where the sort of reconciliation algorithm kind of comes into play react looks at your current tree looks at the new tree that it's gonna try to try to render right now based on your change that you've done to your estate based on the sort of new JSX you're gonna have based on the new stake values and accordingly try to take the new the new tree and commit it to the actual DOM and the most efficient way possible that with causing the least amount of paints necessary so here what's happening is and I'm actually deleting an item out of the array all the items that are coming after that particular item are now gonna have to shift up but basically their indexes have effectively changed so the same data the same bit of in another the same number one or the same number two is still there but the index is now in a different spots in other words the number one which used to been index one isn't actually gonna be at index zero so what happens is react see this and see that all the keys have actually changed so it react now things is oh that means that the entire tree is new I have to go ahead and recreate an entirely new tree and actually force them all to kind of get repainted when every alland that's not the case because it's data is still the same reaction I'm looking at the data it's actually looking at your keys but to kind of prevent this problem from happening we a kind of wants to do is to give it a unique key identifier that is not the indexed one that won't change even if the data is actually changing which is why when you're actually using an ID even if the actual data is still changing but but since the IDS are always gonna say the same the number one will always have the idea of one but number two will always have the idea of two no matter what the index is no matter where if they find themselves in the array now only the actual item that I'm actually going to delete it will get actually get painted and so far that it'll it'll sort of get destroyed and that's pretty much it all the other things that are still the same which react want to know it's still the same because their keys are still the same or basically still remain in effect in their next-gen they're not gonna get repainted again that's basically with what keys are and why they're important the next question is what is context so context is a mechanism that allows us to actually pass data from one component down to another component right so that sounds a lot like props but one of the sort of key differences or the key difference between props and context is that props really only goes from one component down to the next component so a parent can take data and pass a straight down to its child now the child was innate that component and passed down to its child now how I can do that which basically means that if you want to take data that goes from the parent down to a grandchild it has to actually go through the child component because props can only be passed down one level at a time on the other hand context has this new mechanism that allows us to actually pass data from one component down to as many components deep as you want to within that sort of same tree so let's actually see that in code the hair you can see on screen we basically have a relationship of components that looks a little something like this or a hierarchy of components that looks like this you have the app component which will render the child component the child component will then go ahead and render the grandchild component right over here and so the goal is for us to actually have this number one render on screen grandchild is the one that's actually gonna go ahead and render this component that basically returns an h1 and simply reads up the value of prop stuff value now this value comes over here so the F component basically takes this number one passes it down to a prop as a prop to the child component the child can bundle accepted via props and then pass it down further to the grandchild when saying prop stuff value so here we've effectively done zoom we pretty much bothered the child component to pass down value to another component then it never really needed it itself the whole reason why the parent component app actually even had to give the child component this prop is just for the sake of passing it down to the grandchild this is sort of known as the concept of prop drilling we're basically trying to drill this prop down to a level deeper and so actually having to go through the child component just to kind of get to the grandchild context however it solves exactly this problem so let's take a look at that so here we basically have the sort of same structure we basically have the app component which renders the child component the child component then goes and renders the grandchild component but what you're now gonna notice is the child component is now no longer actually getting the props right so no they're not actually passing a proper the child component and in fact here within the child component we're not actually passing any props down for the grandchild instead what we're doing is you're basically creating this context object by calling the react that create context we then sort of wrapping our tire component or entire sort of application in this case it's a tiny tiny application we are wrapping our try application with this context that provider and so they're basically gonna take whatever value want to pass down and set it on this value property on the context that we put that provider so again which is just trying to pass down the actual number one now in the grandchild component what we can do is we can use the use context hook to sort of subscribe to this bit of context right over here now there was this very same context we just create a right over here and then we can literally go ahead and read out that actual value right over here so again the grandchild is now gonna go ahead and render an h1 and seem to go ahead and render this number one right over here by simply passing the value of context or context here this might have been poorly named this may be Beach should have just been named value I completely just read out the value straight out of the context that we're just gonna go ahead and render the number one and what's actually very important now is you can actually see that the grandchild or the child component has been completely undisturbed it is not accepting any props it's not passing any props we were straight able to go straight from the app component straight down to the ground shot component and directly give it the actual value of that and that it means without having to bother and in the components that kind of sit in the middle of the hierarchy let's come the power of contact well that doesn't for this video hopefully you enjoyed it I hope you if he did please drop a like subscribe and I'll see you in the next week's video which is going to be part two of this of this actual reaction to the questions so if you don't want to miss that definitely make sure that you subscribe to the channel

Channel: Coding With Chaim

Views: 67,622

Keywords: react interview questions and answers, react interview, reactjs interview, react js interview questions and answers, react questions and answers, react interview questions youtube, chaim friedman, react interview questions for junior developer, react interview questions 2019, react js interview questions, react questions 2020, react interview questions, calvin friedman, react interview questions 2020, react interview 2020, coding interview

Id: JOa41r3Fr4s

Length: 21min 59sec (1319 seconds)

Published: Tue Jun 02 2020