React.JS Live Coding Challenge | Problem Solving with Turing

foreign [Music] [Music] foreign [Music] foreign live coding today I'm here with iraqib so today we'll be solving a react JS coding challenge you ask kids about that a lot of times and then here we are we are gonna solve a live coding react.js interview okay so so first of all so I'll bring up rakib Hi hakib how are you doing and how's your day doing so far hey Jose nice to be back I'm doing good uh the day has been good so far how have you been oh I'm so exciting for today I'm being pretty good so thanks for asking and um yeah so today I just want to share with you the preview video that we meet with react.js that was amazing okay so um to Guess that this I will present you a challenge and then we are gonna try to solve it together today okay and yeah so first let me present you the challenge okay that is the challenge we have um a react component in your face okay in the open file on the right side we have this embedded browser and in on the left side you have this solution um the solutions file okay so one second yes so yeah right side is the the embedded browser left side is the solution list and the middle is the open file okay on your right side we have these um problem to solve okay we need to use react.js to solve this problem and it is I'm gonna read for you and then you'll let me know if you have any doubts about this sounds good yeah sounds good okay great so uh we need to create a custom wrecked hook okay that fetch users okay and then display their image of the picture and their name on this page okay and this custom hook it must re must uh must return a list of users okay the Cohen user and what else let's see two functions one to move forward and one to move to back if we are in the last user we in the wind we press back it needs to show the previous user in the list if we move forward it needs to show the next user sounds good all right yeah sounds good all right so far we need to do that and we you need to uh call this uh react hooks in the index.tsx okay did you get what we need to do yeah all right go ahead go ahead what we need to do we have this API uh okay it seems like this APK returns an array of user information yes so the iterator hook should take this URL make that API call yes and get the first user and get them get the name first name and last name yeah and okay let me remove okay all the way to the bottom we have the uh the picture okay picture large medium and thumbnail you can display the thumbnail okay okay all right uh and then one more thing at line five you can check uh I already create a couple of uh uh variables okay so in line five we have the user list we have the coolant the current is the current user okay loading I I add that as an extra you can Implement that or not that I'm okay but loading is every time you press the button and it will fetch the user we need to show the user that we are loading a new user okay you don't need to implement that I just add that just in case you want to use that and also two more functions okay one is next in previous next let's suppose you have zero users and then you press next what it will do is it will fetch a new user and then you have to save it store that in a list and then now you have one user and then if you press next again it will fetch another user okay then you have two users in your list if you press back previous it will show the previous user and this is a tricky if you press next again it will show the next user not fetch a new one it won't fetch if you are in the last user okay did you get that yeah okay so I'm glad so what do you have in mind to create this component how would you uh update this solution Okay so it seems the most tricky part here is making sure we do not make API calls unnecessarily when we have um let's say we have three users we are viewing the second user going next should not make an API call so it seems like we have to maintain that list inside our react Folk and we also have to have a way to maintain an index to the user that the that that that's the you that's kind of visible right now and next as previous or just methods so I think the critical part is maintaining the user list and an effects to the current user so the other thing I want to check it seems like okay so it also takes the URL yes they were arm red passing that yes iterator so it takes the URL uh I will return the URL is a string it needs to return a user list so let me Define the user user a user has a name and for picture we're gonna store it somewhere so name is a string and picture is a string so this method should return user array which is the user list yes and I'm glad to see typescript there yeah so that's okay I'll add the types back later okay yeah let's start without typescript okay uh all right so you have this yeah state right yeah we have the state uh users I'll add the typescripts later all right so we have users list um the next thing it has to return is current user so uh we need to maintain current we could either maintain an object with the current user or an index I think it makes more sense to maintain the index uh uh let's say zero for not selected users so users index okay got you one tip okay um so you are using use state right how would you update this date um we would get the state and then set the state uh basically use that state okay we uh okay let me give you a hint uh user state has two arguments the first one is the reference and the second one is the set State function yeah well that's better you don't need to create this alert because it's a reference you cannot update it you can create it as a cost but yeah yeah okay but that sounds better yeah all right um we also need to maintain the loading stage so let's call this yeah um initially it's not loading so it's false is loading and finally we need next and previous so next is the method so we do it doesn't take any arguments returns something that previous this one also doesn't take any arguments it can be constant because we don't want to change them yes and next previous okay all right now do we want to load the image actually let me try to start with this we need a way to get the users so constant fetch user um this method will use this URL to fetch the user so let's see access URL then response so now we have fetched the user uh Let's test it out just for testing I'm gonna call Patch user when user clicks on next yeah and also you have a console in your left side you can check that yeah let me hide this let me close and so is there test it out uh use it iterator uh doesn't have a defu exporter how would you fix that you can do this um in order to test for 16. yeah to fix this you have to yeah use a function rather than a const function um the other thing we could just do is this and included here for the test yeah use so if you go with that go to the use iterator line two you can use uh uh yeah card braces and then it should be good too low it's not iterable oh I'm not exporting this sorry yeah okay so that's the first one that should take care of that it's not exported um no that's that's working fine this is another issue that's a name is not defined okay so um I'll just comment this out for now because we haven't built that yet yeah I'll bring this out as well that's it if I click next we should be making that API call and get all of this data back um results is what we care about so um constant ly there's no response user list equals to be about half results so if I click next now I should be I should get the use on this okay before we go can you explain what what is doing why you are doing data in the response okay so uh we know that uh data is an attribute of response so this is uh basically a convenient way to extract uh data out of it we could do something like this um to get data out okay response but this seems convenient because if there was something else also we wanted to get out we could use this syntax to extract that it's it calls this structuring assigned syntax so you can this structure the object in a cycle variable at the same time yeah we could also do this structure results out of data but name it user list okay in that case you are renaming right so just to confirm it works uh because the result is an array sorry yeah yeah that should do it useless okay um we we are maintaining users um every time we get a user we need to add it to the users list I'm gonna handle the logic of cycling of not uh fetching a user when you don't have to later but this is just to confirm that it works so we need to get the name first name last name and I presume thumbnail from the picture so um user we know the first um object has it so let me just look at it here we have name first name and last name so let's destructure that out of it from name we want to get first and last the first common last so first the last should have this and this now we want to get thumbnail from picture so from picture you want to get thumbnail I don't want to spell it wrong so I'll do some copy paste yeah I also do that as well and just to make sure I have everything I need some mail and just to let you know okay people are really helping you in the chats yeah they are saying how how you solve your your issues okay thank you all for uh helping us on it okay yeah I appreciate it all right now we need to uh push this in our users list so update users um we want to push it at the back of the list so let's get the current list of users full name or I think it will call first name first you want to give our space last so that's our username and some and I think it was picture from Lego so this should keep our user list uh up to date with the latest one okay and could you please explain me why are you using three dots first and then create these object in this after a comma why what are you doing there okay so uh basically I'm spreading out uh so users is a list of array we already have let's have certain number of objects in it we want to add another user to it if we did something like this users dot push new user uh this would not work because it's great for react to be able to efficiently render uh at Cy what it does is um compares react has to know that the object has been updated right if we did this the user's object it's still referencing the same uh location in the memory right so react cannot do if uh old state is not equals to new state right this test will will not pass okay it's a shell to cooperation right so we need to kind of create a new object and to create a new object this is a handy syntax we just spread out the existing list and then tag on to it uh the remaining anything new that we want to add to it go watch him all right um okay so now let's come come here um we want to fetch the user when user clicks next so let's do this we are maintaining the current list of users um sorry the current uh index so let's say if let's call this current index if current index is less than users.land if current index is less than users.length what this means is we currently have at least one more user in our list that I mean if there's three users we're probably seeing the second user or the first user so we don't need to fetch any more uh users so what we do is Set current index uh print first one we just increment but if that's not the case then we need to fetch the new user but we need to let out [Music] um we need to set if loading through okay actually let's set is loading to True here and when we are done fetching okay let's walk through this um initially we are not loading anything so if we aren't loading anything we only display our stuff if we're loading something if not we don't the other thing I want to do is I didn't get this what to what are you trying to do okay so um let me just roll back Okay so if we don't have a user list yet we're not going to uh render this part so user list dot length is greater than zero and we're only rendered this part if we have at least one user when user clicks next our iterator is going to see current index is zero user's length is zero which means we don't have a user this condition fails so we come here we fit the new user we uh fetch all of this user we fetch the latest user and then we need to set the current index but current index current index at this point is length of our because of render cycle we might not have the current information so let's do this let's uh number supplements so at this stage we know how many users we have we have added one more user to it so this kind of becomes the user we need to display that should do it so if I click next now we should use load a user so that's all of the users will have if I click next again cannot use properties name okay it's probably here okay I'll come back to that foreign you can console log your user and see what what do you have there uh yeah that's a good idea um use a list map so I think the problem is um foreign so we're having an issue here a user at this stage is undefined for some reason oh because current user is not valid yet so let's just do print we have useless we have current user let's go next current is undefined yeah this is because your index you are setting your index to the next user yeah to fix that in line 42 you have to use go ahead index uh -1 but if I do this if I set it to -1 it will fix this problem but it will cause another problem uh yeah initial indexing problem um the other solution is let me verify something I want to see uh if the user list is being populated correctly uh user list has all of this stuff we are the console button next okay user list is not being populated properly so we are kind of losing uh user list because this logic seems right so I think what's Happening Here is um update users users has updated but we are not getting [Music] um foreign user okay so it seems like the problem is uh when we are updating uh the user list it's not like the initial call which is made let me show you two in here when I make the initial call I have current user current user um if I click next at this point the user object is not updated properly like it should have two objects but it still has one object in the first stage now it has three five minutes or I think that should take care of it let's check the index okay uh so I would oh sorry I'm not saying man let's hear yeah I think this could take care of him okay user list is empty right now current is undefined which makes sense and then you fetch one um user list okay take a break let's check your let's check this function okay part by part so let's let's go walk through so we are uh calling our API yeah uh calling the API and then we are getting the user you are creating a new user right and your user is a list right your user is a list uh and then you are um you are using spread operator on your users and add a new one right it seems to be right but now we we need to check the current user let's console log your uh num users because if you have one user in your list okay this will return one but we cannot access an uh index one in your array because one do not exist we have one user but the index is zero right so let me refresh current user is this uh this makes sense if I click next you are almost there the problem is you are setting the Cool Hand index for an index that do not exist and people aren't seeing that in the chat you need to increment and while returning you should go ahead and index -1 yeah but it will cause another issue right let me put myself in the screen again uh what you can do let's do a test okay yeah in the line 25 let's use um last one yeah last one because it will get the indexes right but then okay this will it should be working now right now let me remove me out this is one thing right this is one thing and then in your function next okay uh Cohen index will be one number less right now right you need to fix your next function as well uh okay go ahead index plus one you can you can add a plus one there not there not there not there line 36. if go ahead index uh plus one yeah but uh this will probably uh not there not sure no no not at line 30. 36. make sense because now you are comparing you your index is one less makes sense yep make sense because you already compared one less yeah great okay I'll implement the previous function okay great people are helping you on the chat uh this one's easier if current index Prime index it was to Trend index -1 yeah current index is less than zero the current index equals to put myself back here minus five but current index yeah that should take care of previous uh foreign yeah that's okay but you need okay it's something we are getting there right okay let's do a couple let's do one test okay can you refresh it let me move me out here let me put myself right here all right so so let's click next and then you get these doesn't actually load anything Uh current is undefined we get the list of users number of users here is at this point it's -1 yeah um we loaded the user this is m key um if it's minus minus one you have to set it to zero right because yeah you are getting the list of users before you fetching so it will return minus one uh but now we have another issue right okay let's do the test again let's refresh the page and then let's hit next it's highlighted yeah but if I click next it doesn't highlight this user but it should yeah now it works now it works so I think the the problem here is the initial load one of the ways I'm I can think of solving this is just this use effect fetch when we load we just fetch a user we have to do it only once so when we load [Music] um which is the refresh it will look forever but then we're calling it only once uh why is this happening set is loading is not changing settling is loading is set to true yeah I think maybe an API issue let me try again yeah yeah I think that was an API sure because this should only be called once uh and then we go inside fed the fetch the user number of users is at this point minus one we have a array of usage uh first user and then we set it to zero that correct and then now if we do next this increment is not working because uh apparently OLX we actually parent index is zero yeah this should do it fetching the next user okay let's let's leave it for now okay let's um let's let's bring the picture okay so for bringing the picture um I'll just delete this okay uh we have the name and we also want the picture so ing let's print the thumbnail picture is an object right uh I think we saved it as picture here okay gotcha all right so it seems to work except for the first initial load if I'm here and I go next it goes to the next one goes to the next one goes to the next one so this is okay go to new user when we load a new user we don't yeah the problem is here what what's happening is this update and this update yeah I mean so when we make this update like we have to make sure the updates happen like we render only after both of the updates have happened uh how do you do that all right thinking um but I don't think this is the problem is I don't think this is the problem okay um let me walk through this again so fetch user we called user uh number of current index is zero um total number of user list is one if I click next this condition is going to hit one is not less than one sorry this condition is not going to be true we're going to fetch the user number of user at this stage is 1 minus 1 is 0. we fetch we already fetched the user so Here length is 2 we are setting the current index because current indexes one which is correct but the two renders are happening at the same time I think what we have to do is this effect when we when users list changes foreign how do I hide it again okay when our user list changes the only time this will change is if we updated users and if we updated users that means we want to show the last user right because we have five users we are trying to go next that's when we fetch the sixth user that means our user list was changed and we want to display the shift sixth user the sixth user is users list plan so this should solve it let's start so we fetched user uh we updated the list and all of this stuff now if I click next there if I click next this verse yeah so the problem is this this two things happen at the same time because of because uh this initiates a state change this also initiates a state change but we have to do it one after like we have to all uh we have to update current index list I mean if we do this there's no guarantee that this will this will happen only after sorry this second state change will only happen after this state change so but this way we kind of guarantee that so refresh unload reload the user I click next new user is loaded I go next previous previous works perfectly I go next not loaded because we don't hit this condition yes if I click next the condition is hit we update our user list only after the list has updated we update the current index so I got rattled a little but this is something to be mindful of with uh react State Management yeah because we're not updating in batch right yeah okay and what's the the other way to to do this same but without him tricking another use effect you don't need to do just let me know Okay so what's the other way um okay I will let you know okay another way that I that come to my mind is um rather than the news I promise you can use a sink away and then wait that uh axios and then perform the the other one uh here no yeah yes yep that that works that would also work okay and so if we want to let's say add typescript so how would you map your users where you map it okay so the first thing we need to do is user this is a area of user uh this is a Boolean variable sorry this is a number okay this is a Boolean variable so so we defined our types okay to Define what we return okay before that can we scroll up a little bit then we can see the uh all right why did you create uh interface rather than a type why not a type no no this is just a question okay you don't need to change but why did you create an interface rather than a type uh so I don't have the answer offhand but I would imagine if I wanted my user to support some function um I would probably not be able to do it with a type but I could be wrong about that okay so we have a couple uh folks watching this if I ask this question for you okay why I interface and not a type what would be your answer could you please let me know in the comments why I interface is not a type and why I type in not interface I would like to hear that from you okay all right uh rakib let's let's keep adding typescript to it let's see uh what we where we can get we are supposed to return a list of users which is our user list we then return uh user which is our current user we then return a Boolean variable which is the loading State and then these two are functions so those two functions implement accumulator uh I think yeah so next is a function that does not take any arguments and does not doesn't return anything which is why it's void so iterator now it's typed so if I say is loading it's going to flag it because it expects an iterator uh I think yeah yeah I think that's all there's yeah all of every all of the states that we use have uh had types added to it okay so Rocky that's it for today okay um okay before we finish okay how do you improve that so we are Uric calling functions we're calling variables so what kind of uh Improvement in terms of caching we could add that uh so we I mean from the problem statement right yes uh we kind of cache it well because we only make an API call only when it's needed so on load we make an API call uh we if there's not enough users we don't make an API call we don't go to the next one we we just go to the next one [Music] um I'm trying to think if there's anything that's not optimized here this is probably this uh hook is probably the only one that I feel like we could optimize a little better if we could do that indexing because State Management uh users is needed current index is needed is loading is needed these are required to solve the problem uh this is also required because we want to load a user on initial load this feels like something we could probably optimize but that requires I mean what one of the solutions is you what you described doing that because with this we are letting react be kind of in control of it like you know add additional tracking that users has changed or not but we could probably do that on our own okay one more last thing could you please open the console on your right side oh okay yeah yeah let's see so that's probably another optimization we could do so um let's imagine here we know picture URL is unique although this is probably a bad idea uh you can get anything in the user that's ID there yeah I mean this is from this is a bad idea because it's a very long uh URL so we could probably update our interface to include uh an ID I think our API doesn't give an ID okay does id.name so we destructure the idea out of it this assumes that this is unique for each user okay we put ID here and ID here uh when react is re-rendering this list if it has the IDS it can intelligently decide if it has to render a certain certain list of items it can only uh add to that list the new kind of item that it needs to add based on this okay is that ID does this idea work as a key uh I have to double check tabs uh if it's not efficient okay you need key property so it's probably key yeah that's better yeah that uh error is gone now yeah that's worked because um we actually has used this key property in in its uh DF algorithm okay to use um to compare and just update the the roles that you want to update in the in this case it doesn't make too much difference because we are not changing values like we are not changing the username or anything uh but if you want to update the username or user ID or anything else not ID name email or something else it will make difference okay and people in the chat are saying uh when use okay two to three good comments All right so uh in case of typing interface or type when you use you use interface when you want to extend or mutate times and best I've seen is saying we use type of for adding the data type but in interface receive functions and values provided by Logic Hooks and share then with other logical works yeah all right so rakib thank you uh that's it for today okay thank you for attending this meeting um so if you come to mind if you like this I would pass you for sure for the next step okay because you you did the job okay so that's it for today if you guys have any question anything to ask I'll feel free to drop a message in the comment section below and tell me what kind of live you would like to see in the upcoming video like a live for python as well would you like a live for um Java or c-sharp or anything else you can leave a message here we are gonna create one for you another thing you can go to turin.com is Less jobs and search for the job that are suitable for your Tech stack so if you are not subscribed to touring YouTube Channel please uh hit the red button and subscribe to it it's free it's just we need to press the button okay if you enjoy this kind of comment comment leave me a message and give me a fat thumbs up for this video and don't forget to subscribe to our Channel go to tuning.com search for the job that has three people for your Tech stack and apply for that okay the job uh that we that the the this live that you saw today is one of the challenge that we pass and you can you might get around in your interviews uh around the world okay so I've seen people um saying Java okay Java is it will be really interesting rather python we're gonna get that okay rakib again thank you for your time okay and before we finish how would you keep yourself update with uh react uh stuffs or everything else for me personally um there's basically two things that I do want is react.js there's documentation their documentation is very good uh the other the other is uh YouTube channels like this one where there's always something new uh to talk about all right great great thanks for that and I hope to see you all again okay uh next Friday we have a coding challenge live again so we're gonna solve another problem live during the a lot of code problem in the next video I hope to see you all guys there okay as that said that's a wrap thank you for your time and I hope to see you all again thank you [Music] foreign [Music]

Channel: Turing

Views: 29,380

Keywords: Problem Solving, Turing Code, Turing Developers, Turing Remote Developers, Turing Problems, Turing Interview, Turing Vetting, Turing Matching

Id: GeoohyU8Qxw

Length: 58min 39sec (3519 seconds)

Published: Thu Oct 13 2022