2.5 Years Experienced Best React Interview

watch this interview in such a way as if you are being interviewed and I'm directly asking questions to you if you do this your practice will be very effective and you will perform very well in the actual interviews and if you want to a your front interviews then you need to practice JavaScript and react very well you need to know all the fundamental concepts all the behind scenes things in react and in JavaScript and I have made a full dedicated course on JavaScript and react if you understand Hindi then my JavaScript and react course will will be very beneficial for you you will not find such in-depth courses on the internet be it free course or paid course this course is the most comprehensive JavaScript and react course that you will find on the internet and the best part of our course is it is completely free of cost you will find all my courses completely free of cost on my Hindi YouTube channel so I will provide the links to all courses in the description below please do check them out now let's start the interview hello hello hi yeah than how are you I'm fine how are you yeah I'm good your crazy JavaScript interview video that got viral uh yes I saw that in four weeks it got 100K views so anyone who have not watched that video that is the craziest interview I have ever taken I will provide its Link in the videos description so anyone watching this video can watch that and now we'll do some crazy react interview okay okay so just introduce yourself first yeah okay so uh I am Avinash Kumar Singh uh I passed from an partna in 2021 uh I have been placed in infoage uh as a fresher only and I am assigned in the front end team uh I am working I am currently working as a senior software engineer in the infoage noer Gulf vertical and I have used pretty much like react JavaScript HTML and CSS with web pack and build tools and that's that's great so let's enter start with the interview okay so the first thing is why do we need react like what what is the need for react can't we do everything using JavaScript yeah uh we can do everything with JavaScript but react somewhat facilitates the development process it makes easier to develop any apps uh okay with some of functionalities like reusable components uh it's internal virtual Dom and it also maintain readability and you uh like code reusability also okay yeah that's so what is the main feature of of react that you would say is very important which allows us to make bigger apps with less codes so is it component or component architecture or something else uh basically in react yeah we do use component architecture it has the virtual Dom internal functionality also uh but like we we don't tell the react how to do anything right yeah we usually tell okay this is my component I am updating the state of the applications and you just do it we don't know how you going to do it but you just do it but in normal JavaScript application in each and every step we will be telling uh like the application is this is the variable the next value is this and now you are going to update the Dom like with document Dot uh like say uh get elment by ID and then assigning the value itself so we just have to iterate through every process in the native JavaScript application yes that is correct basically in react we have States yes and we update State and UI automatically syncs with the state yes yeah that is correct and do you use V CRA or next year uh I have have used the like the web pack one earlier okay nowadays we is popular more yeah so that is my question why like why V is popular we somewhat like bootstrap our react application with all the features required to like for the development for a production ready app yeah that that is also done by create react app also so it also does the same thing right yeah uh I personally never used we but I read it somewhere okay yeah okay so you have not used it my next question was like if you if you would have used it my question was why V is faster like people are using it because it is faster faster to develop it develops the things it uh like creates the reactor very fast yes so and development process is also very fast if we write something immediately it reflects yes so why it is fast you can research like on that why it is fast compared to weback or parel any other bundler yes okay so in short if I tell so like parcel or webpack they bundle our components multiple components into one Javascript file and then that is being served right yeah but V does not do this while development in development it uses es6 modules to serve all the component files if you have 10 components it will serve 10 component files so it reduces that bundle time okay and why uh this V is able to do it because it came later after es6 version was like uh released web pack and parcel these are from past when es6 was not there so they used to compile all to one file okay so we search the es6 index to the browser yeah but what about the older browser like no no yeah in in development I told in development while only in development when once you build the product uh like project then it will do the same thing it will compile to one so only in development so as a developer it is very fast yes after compilation there is not not much difference it is all same okay okay so can you tell me what is react element react element is basically a a special object uh to represent uh the react comp basic components like the atomic structure that we use to write to build any component so it's basically just a object which contains some special property to represent that object like the key the props the children should be there yes that is correct and what is uh react component react component react component is basically a function uh which returns uh what we can say is uh HTML collection of HTML elements nested elements it can be a nested element or sibling elements okay yeah that's that's true so you said it returns HTML elements right yes so is it really an HTML element or something else it's basically the jsx elements jsx syntax yeah so what is jsx syntax jsx syntax is basically a feature provided by the react in which we can write HTML uh like HTML codes in the JavaScript itself yeah and it then transpiles or compiles back to our like normal react. create element things with some compiler like we have I have used the B yeah so it uses B to compile trans file or compile anything okay that's good so you have have used react fragments uh yes so why do we use it uh basically when we have a siblings like more than one Elements which are like kind of siblings to each other and react basically of any functional component It generally returns a single like nested element in which all of the comp all of the elements are nested yeah but react has a feature to return only one one element okay and if if you are trying to return uh more than one elements like while doing a DOT map or something else so so the question is why react has the feature to return only one element why can't it return to elements okay because it's an object it returns an object I guess I'm guessing yes that's correct actually can you think of a function which can return two elements like two values like in JavaScript from the perspective of JavaScript it is not possible yes so the same concept with react also and that is why like the JavaScript itself and it doesn't make sense to return two things right from a function so that's why you always expect one value to come from a function yeah yeah so that reason is correct so what happens when we use fragments uh It generally uh like it is not shown in the Dom yeah either you have to use a div parent and then return that all the siblings elements into from that nested element D elements but it will also reflect in the Dom also yes yes but when you use the react fragment it will not be the part of the Dom it will generally like put all the siblings in the Dom itself without the reactor yes that is correct but what if I ask you to not use fragment or diff like don't use any like don't use fragment don't use div or any other HTML elements okay and still I want you to return two sibling elements how will you return it so so that it works okay uh I can basically create a map no I'm not good I'm not getting it okay so if you think okay let let us move to next question then we'll come back to this question maybe you are able to answer after that how do you render let's say you have 10 elements how do we render that in react if you want to render multiple elements bul like list list of elements how do we render it we just uh uh map through all the elements and yeah so why don't we use for each why don't we use for because map Returns the array of elements for doesn't yeah what does for each return for each I I'm not sure but it doesn't return anything yeah so a function which doesn't anything what does it return undefined yeah that is correct so for each returns undefined so basically you say like let's say if we have an array of 10 elements and we want to se it to the Dom using AI or something any list then we will map through that over that element yes and we will from each call back function we will return some jsx element right okay yes yeah so that jsx element is nothing but object right yes yes so that will be list of objects present in an array right so we can write that array manually also right yes we can write 10 elements manually inside an array yes we don't need it is not mandatory that you have to use uh map right obviously now this question G gives you the hint yes we can manually write each an ele each and every elements into the our component also yes so that fragment yes yeah instead of fragment what will you use okay uh instead of fragment I'll use function to return all the map elements maybe yeah we like you don't need that one more level of function okay we can directly array. map elements and write it there yeah in this case we don't have any array okay uh we had two divs side by side and we wanted to return it yes but I told that don't use D don't use uh fragment yes so what will you use I'll directly just write it there write it but it will give error right yes because you have to return something a single element yeah okay uh no I'm not getting okay okay I'll give you this idea so you can just put both elements in an array by comma separating okay okay and it will automatically be rendered yeah it will be automatically rendered because map return an array and put AR yes yeah so an array is one entity one thing it is not two things yes and since it is an array so it will not be shown on the Dom because AR cannot be shown on the Dom so only those two children elements will be rendered but the catch here is we'll have to provide the keys yes whenever we use array we have to provide a key otherwise it will give the warning that uh please provide the key something like that okay that's good now the next question is context API versus Redux which one do you think is better uh better personally I have used the context API throughout my journey I have read about the Redux you have not used Redux right I not used Redux read about it and also read about it like it is used in more complex applications because we have multiple states to manage yeah whichever is which one is better like it's a debatable thing you can achieve all the things you want with the like whatever you are achieving with context apia you can also do with the Redux also yeah uh but so I never use Redux so I can't comment on that yeah it's all right so basically this question itself self is wrong this question should not be there in the first place because context API is a way to provide Global state to our all components right but Redux is a way to manage our state yes Redux itself uses context API without context API redex is not possible yes you can never use Global State without yeah so whenever we use react uh Redux we use one provider component from Redux and wrap it around so that is nothing but context API provider same thing so that question itself is some people say like context API is better Redux is better I also read it about it like context API versus redex yeah so this question can be there context API with use reducer hook yes have you used use use reducer hook yes yes yeah so that use reducer Hook is inspired by Redux so use red using use reducer hook also we can manage our states right yes so the same way we use use reducer we use Redux also also to manage our estate yes with use reducer hook we can use context API and come up with something close to Redux and Redux provides one more benefit that it has great dep tool we can inspect all the uh actions which has been dispatched we can time travel back and check what happened in the application so that is one major thing yeah okay that that's good now what is what is Babel like you have already mentioned yes so what what does it do exactly in case of react bble just compiles our j6 synta into the react uh like react internal functions to help the browser to understand what we are going to do with our pool yeah like whenever we write our jss synex like suppose you are returning js6 synex from a functional component browser will not understand that it doesn't understand that all the things if you are writing HTML code inside the JavaScript it will throw an error itself at the first line itself yeah so bble does this like it transform that uh jsx syex into uh now normal JavaScript like uh what does react provide react. create element thing yeah does that so does it do only GSS conversion or does it do more anything else it also uh like provide us the source map of our application our JavaScript code okay yes that is correct and Source map is there jss conversion is there and it's it it also Minify the code uh Minify we can do with other tools also I don't know if B does that I think it it is very simple it it can do that also but one major thing that it does is it it transpiles our code to our modern JavaScript code to older versions yeah older versions of JavaScript code so that our application supports older browsers also that is one more thing so it is Javascript compiler we can say uh modern JavaScript compiler to older version like it is not exactly it does not can you tell me what is compiler compiler yeah uh a compiler is basically uh like which converts our human readable code into the machine R will yeah that is true with like print language yeah actually the more precise definition will be compiler is a program which converts one programming language to another language like yes right now this yeah this is more general definition it will cover your your definition also and this definition that from Modern JavaScript to older JavaScript these are all so like different versions of languages right so this is what Babel also does and you told that Source map it provides Source map so can you explain on that what is Source map uh Source map like B transforms our code into its own like version of JavaScript file like provide all converting all the jsx syntax into the react. create element all the internal function itself and it also provided the source map like it's map it's mapped our JavaScript code into its converted code and it's also maintain a mapping like what we have written some lines of code like console log or any functions it creates a mapping of our code to it to its code and whenever we are debugging our code or something like that yeah it facilitate facilitates us to do that yes so can you share your screen and uh we'll see that in exent how it works Source map yeah is it visible yes it is visible yeah I have created one react app created with yeah so can you zoom in zoom in here more close this terminal close it we don't need it rarely we'll get error one more time yes that is good now go to app.js and just put a console log hello something like that okay here just before return okay and just check so if you can you change this like uh extension to jsx yeah app.js to jsx just change it yes okay now go to the console of browser Zoom there also zoom in yeah yeah so can you disable that uh strict mode so that double console log does not come okay remove that you got called yeah so yeah so can you tell me what is the role of source map just by seeing this what is the role of source map yeah uh we can like whenever you click on here yeah uh you you go to your code uh I can show you here yes it's basically going back to our app.jsx file right yes but if we use our uh like the transform it will be here what are you searching the uh like the script file that our like compiler has created yes so it'll be there it is difficult to search there I think it'll be somewhere below okay so so it basically Maps our element to here but we can see our JavaScript our native JavaScript will never appear in the network tab right yes doesn't get called like that it only like uh called from our compiled version but it makes a mapping and whenever we are clicking here yeah directly like lands us here yes that is is true so can you configure your web pack in such a way that it does not generate the source map do you know the syntax I just have to I have used the C so I have just to eject the web pack and then we can it's okay we can leave that so come to the dev tools yeah uh in the settings there is an option to turn on Source map and off do you know that yes yes yeah so if you disable that yes yes and come back to console log and check yes yeah this is from bundle and whenever we click here it is not our file right this this is this is the real file which is getting executed yes yes and Source map maps our code to to the bunded code yeah and see where where you are returning J like that uh jsx it is all converted to react. create element here we cannot see react. create element yes but that zero and react jsx runtime after pure comment it is exactly like if you go back then like it is exactly that react. create element just the variable name is different yes obviously yes that's true now I will send you one Javas like this this react is snippet okay I will send you only the body of function so copy it and put it in the inside your app component remove everything just put this one no no no don't don't remove only inside yeah I sent you only inside part okay yeah so just uh take some time one minute just to just understand this and tell me what will be output when we click on start timer button okay we have a state which is initialized from zero we have a function which keeps on incrementing okay whenever it is called uh there is a rendered element there is a button which will start start timer whenever we click on this this will be called we are accessing count like this count Plus One will be stored in new count or we can directly pass count plus one yes yes we can directly pass and in every 500 millisecond it's updating it but what okay I'm guessing like it won't be upd reflected in the UI okay so what what will be the reason reason will be uh uh reason will be like set count will never receive the updated value here right it will always receive the updated value after the rendering one time okay of the component but component once we set it once we set the value yes the component will reender right the component will reender yes or will it not rerender no uh like set interval will be passed to the call back VI right and which the count value initial count value right M and then where ever set count will be increased this new count will always be the initial value it never gets updated because it it was sent to the call by Q yes so the question here is the value of count will be zero right yes yes 0 + 1 is 1 yes and we'll set count one yes so on a screen will it be one or Z Z on screen will it be one or zero uh it will be first time it will be one it will be I gu I'm guessing okay it will be one I am guessing and then second time second time it won't be increased because new count value is never received here okay you can open and check it okay uh okay you can import that US state yes okay don't click multiple times because it will start yeah refresh it and click once only it starts yeah yeah it is not reflecting anything it's changed one time and then it never gets updated to the second value yes you can put a console log in uh any here also just console log new count so what will be the value of new count every time every time it will be uh like the same that is new count also will be same right yes count is never updated after that yeah you can check that also then we'll move to the next question yes the this is working in set interal is working but count is never getting updated yes okay so can you come back to the code and explain me why that updated value is not getting received why that updated value is not getting received see uh the set inter what we have written here is similar to writing multiple set count after one each after one another right like this one yeah like this right whe it will Beed after 500 millisecond but it will be like similar to writing this one okay so uh whenever we write this kind of syntax like set count new count it never received because it doesn't rerender in that time and it never receive count value again so the count value is always the same okay earlier you told more precise reason that it is it has been sent to the call back Q early on when the value was Zero yes and the value sustained zero all together yes so the more precise answer to this will be just put a debugger after line number nine so the more precise answer will be this call back function of set time out it forms a closure over the count variable and it remembers the value of count which was there in the first render cycle because this function was never created again it was as you told it it has been sent to sent back and it is being called from there again and again so if you just put AER and come to the uh like sources tab uh yes uh enable The Source map okay it will it will be really hard for us to debug without Source Maps yes obviously yeah it basically comes back to the map yes and if you open the Scopes tab increase the height of Scopes Tab and close that reload dep tools that popup is coming on the top so can you see this closer uh like new count local and count the open this closer yes so count is present inside a closer yes which this call back function has formed the closer yes and it will always be zero always okay that's great now can you tell me the difference between use callback and use memo hook with the example like you can first first just tell theoretically and then explain it with the example write by writing code okay uh basically these two are hooks provided by the react uh to improve the performance our of our application uh use call back suppose we are uh supplying or passing any functions to any child component from a parent component and whenever the child parent Comm is render child also renders yes but whenever we pass any function through the props uh function will be uh like referenced again like it will be assigned memory again recreated recreate again right so it will keep happening again and again because whenever parents render child will also render because of that function Recreation yeah and we just like call back uh syntax into the function wrap that function into call back it just remembers the reference to that function whichever whichever was created earlier and it only updates it has a second argument also so it only recreate that function whenever that dependency argument will update it yes that's correct B memorize the reference of that function yeah and what about use memo uh use memo is basically basically performance optimization hook provided by the react which basically remembers the end result of the of any like uh function which is like more uh which was consuming more memory to compute any result yes and it it it also uses a similar trick like it always recalculate that value or recompute that function whenever its dependency ARR will change yeah so what does a use call back hook returns and this use memo hook what is the return yeah return a value yes and use callback hook will return a memorized function yes yeah that's true can we return a function from a use use memo hook can we return a function with use M hook uh I have never returned it like like that but I am not sure we cannot return it is used to like store the value return a value okay okay we can return it is just that like whenever we we write a function inside use call back hook yes yes it returns whole function yes memorized version like it will not update that function correct yes and if we write the same function inside use use memo hook it will return the return value of that function correct yes the value of the function yeah but what if we return a function from Return value we can return right yeah the return value itself is a function yeah yeah value if value would have been a function then yeah yeah so but in that case only if some special case is required we use it and otherwise use memo use call back book is enough good for returning functions yes okay now let's move to our machine coding round the crazy coding round in this round what you have to do is create three guns okay just create like one L-shaped div you can create and we can assume it like a it is a gun and whenever we click on the gun it will shoot a bullet okay and that for that we will need animation but it will take time to write animation so what we will do we will not if time is there and it feels easy we can do it or what we can do is whenever we click on that we will not animate that animation should not come but in front of that a DOT will come we will imagine that a DOT will come and will go in 1 millisecond or few milliseconds like okay 100 milliseconds so that it is visible to the user whenever we click on the on the gun it will shoot a bullet it will just appear and go okay okay so the difference between the three guns is first gun is normal gun it will shoot the bullet every time we click and no matter as fast as we click it will shoot the bullet second gun is debounce gun it will you you know the debounce like how Behavior right until user keeps clicking clicking clicking until user does not provide the gap of certain milliseconds it will not shoot anything when user will uh like when user will uh give it time then only it will shoot the third one will be throttle gun okay so throttle gun you know the behavior of throttle right so throttle gun will work in such a way that it doesn't matter how fast user clicks it has fixed time that every 100 millisecond or 500 milliseconds it will shoot a bullet so this is what we have to do now the main thing you have to write debounce and throttle function yourself okay okay okay so first write that function then we'll make the gun okay and for this you have one hour because this task is Big okay so first I have to write the function debounced and throttle one right yeah uh just one more question uh coming back to that bullet thing how are we going to represent that bullet with a full stop like with a okay with a div uh with C with background color some background color and or yeah we can make a cylindrical div rectangle and and that will be our buet bullet okay and if I am going to press multiple times the first gun there will be multiple bullets right which will be placed side by side uh it should not be placed side by side it should come and appear like come and go or what what we can do is the better will be there will be one bullet okay the better uh approach will be like this there will be bullet in front of every but as we press there will be one count on top okay okay and that count will increase okay okay one like more easy to go the count one yes and uh now the functionality for this also I would like to change that uh for example this one normal gun will keep increasing as we keep keep clicking right 1 2 3 4 5 6 yes but debounce how it will increases if we press 10 times immediately fast it will be zero but after we release it it should be 10 you got it okay yeah so it should remember how many times it was clicked same with the throttle so we will update that number on the top of that okay I got it hm uh should I just comment it out I okay you can remove or you can comment it's okay you can put you can copy this file just make a copy of app.jsx yeah and just to copy paste just leave it there uh now you can modify your this yeah okay uh so basically I have to write first the debound and the throttle functions yes okay uh our de which will accept a function and a delay uh sorry and Deb is basically the user will wait for some time to execute that function I will have a timer if timer is already running I will reset the timer so it's basically return of function which we have passed through arguments so I can accept the argument and uh whenever I have pressed again again again again it will clear the last function called okay clear our timeout which I'm going to provide it and set a new sorry set timeout which a function and delay and we will call our function with the arguments this will do uh yeah time out will be cleared timer will be set time out this after delay yeah this will do good yeah so first yeah test this okay uh suppose we have we have a function we writing function you can test using input also it will be easy okay uh in you mean uh input element and then passing that yeah okay on change of that you can use this okay suppose I am returning a input element on change we have handle change we can use like this no we we don't need the second close that's it okay uh we have our function handle change it will receive our event and we can okay so I have to debounce that function so what I'll do is I will receive a debounced g change function by our D bounds passing our handle change and delay will be 500 Ms right or 1 second uh no make it 300 milliseconds 300 okay this will do console log our value right and this will be passed to here so basically we have our debounce function our debounce function is taking a handle change function this was the argument argument will be here function will be called with arguments okay input is here so we go back to remove refresh and okay sorry I just need to reorder the functions okay and are we consoling it yes okay so just keep typing for some time okay okay I just a v i n a s yeah it is printing it is not printing character by character because of the DB yeah just keep typing fast anything just anything just JIS yes yes yes now stop it yeah is working now yes okay so if you want to write throttle function you can write yeah yeah yeah obviously uh our our [Music] to will be accepting a function Del throtle what is that is that after a certain interal time it always called our function right whenever we call our functions so there will be a let's suppose the variable name is timer only it return it accept arguments and return the function if timer is not there then only we will call our function with arguments right and then timer will be Sav to uh uh like timer will be null we can say that after a delay right so our function will be passed here it will be called here because first time timer will not there first time it will be called and then timer will be assigned as set time out ID after some delay this will be again if I am calling timer will be there so it will not be called okay uh and if I if we can use that same thing same function to check create another input field for this okay and this will be throttle change right and our throttle handle change is there 300 Ms is fine yeah uh for this make it 100 make it 100 okay and we are good to go uh the second function is here right so I'm typing yeah it is not printing character by character but after what I have written in that amount of time it is printing can you can you increase the timer more like 500 milliseconds okay yes it isting make it one second yeah obviously yes yeah yes that is working now before you move to making guns yeah can you show this whatever is being typed on the screen for both input Fields just write debounce and throttle and in front of that whatever character you are typing whatever value are being console logged yes we want to show on the screen okay with a using a state variable you mean yes like and is there any other way to show it no so so okay I'm using two State variable for both the input yeah it's okay yeah you can okay uh first input I can call let's call it BL State and this will be starting from empty throt input throtle spelling is uh incorrect spelling okay okay uh and then okay how can I throttle changes here so I have to two handle change yeah you can create two handle change okay yeah it is good uh I gu can set D bounds input to value and I can set throttle input to this value and whenever the function is called the value is printed so yeah I am guessing it will work you should show that on UI you are not showing it okay okay yeah the first one will be debounced input and and we can use span here to show that D bounce input and this will be good just write a string in front of it D bounds just write D bounds colum okay this will be throttle and this will be throttle input throttle input was here yeah I can increase this uh let put put yeah so that it will be go to next line yeah now it is good uh let's suppose I am typing something here and I am stopping yeah working and I'm typing in the throttle one okay it is I have we have doing any mistakes yeah handle change throttle is there throttle change is there we have used 100 Ms so one thing I would like to say that there is no problem in your throttle and de function there is some other problem okay there is some other problem we to okay also when we are console logging it it was working f it is working console like when we were not showing on the screen yes yes we tested it right yeah y uh toal changed it will be some of how we are consuming it so input is [Music] okay whenever we set our debound state it will be rendered yes and our throtle function will be created again I guess yeah so this timer won't be there right so we we will be using use call back I am guessing that will fix the problem where is that and use okay no it will be created only one time with the use call back okay you you gave me two functions which are updating the state use call back is remembered when we pass it to Children it is the if itelf rendered it will be again created right but it is EMP we create it only one time no it will create only one time so let's check it with debugger okay uh I'm doing think no console log will be there but we have given it 1,000 Ms right okay but it will won't be working like debugger we won't be able to debug it yeah this is not possible to debug using debuger yes uh why okay uh let me just let me just change setting throttle value no yeah we setting the tootal value you're using the E and also for debounce if you just reduce the time to 100 milliseconds yes and now check for debounce Also let's see if it works okay no no no it is not this is also not working yeah I expected that okay uh should we memorizer function no actually you did use call back that is in right direction but wrong place okay like yes uh we are using debounced function but we are it is also I would not say wrong place that is correct but still you are missing something okay day bounds change is not it will be created again right it will be assigned again so can we use use call here I am guessing so to remember that debounced function yeah you can you can use why why not use callback will accept will argument but it won't be written it will accept an arguments it will return our function I'm guess messing with the syntax some parenthesis or something you missed yeah it will return our Deb function okay let's just check with one first it never ran there is some mistake logical mistake you're making you in right direction but okay logical we have created yeah the question is what use call back will return it will return you can close this uh this file menu file menu is taking a lot of space okay this will it will [Music] return no use call back will return only the reference to that variable to that function yep we are returning our function from here but is not getting accessed with debound change okay let me just think one more time our de is here handle change is here let's return something from change and then we will set debounce is Creed only one time but debounce change is Creed multiple times as it is getting R we just have but use call back will Pro only it will not give the new new value it will provide only the older value of function yes it will remember always remember the older value yeah so so okay if you want some hint uh yeah yeah obviously so at the end in our debounce change function what which function do we want to go and store in our debounce change function we want our handle debounced handle change function yeah select that whole expression which you which was assigned earlier select that whole expression Yeah so basically we want this piece of code to be stored in debounce change function right yes but if we use use call back it will return not this but through the like no no whole Arrow function from from starting select that yes so what we can do it will it will return this whole thing and yes that will be called that will be called actually but this will be return and it will go in air it will not be captured anywhere this function will yeah we can directly write like this no yeah you can try okay no no I missed yeah it is working yeah it is working so maybe refresh was not correct or something and it is 100 Ms make it 300 Ms yes 3 300 so that we have 10 to right now test it again yes it is working yeah now so earlier we were passing a new function which was like our function was wrapped in inside that new function it was not our function it's just getting return yes yeah so we can use here also yes it will we have signed 1,000 right yes it's working yeah it is also working yes that is correct now if I want if I say that use that Arrow function do control Zed and leave it like that although just comment out one second just do control shift shift Z control shift Z command out this code because we will need this code it is uh one parenthesis you forgot yeah comment it and I want you to pass an arrow function and return this our bounce the way you are returning then what will you do so how will we achieve that right yeah how will we achieve that uh in the earlier version we were wrapping our function inside another function and then function was returned so okay you can think if you want some hint I can give that function was being returned U can we make that our rapper function ify yeah you can you can make but that will be not the correct uh one hint is you can use you have to use other hook instead of use callback yeah I have to use other hook you cannot achieve it with that syntax using callback okay we can you like we are returning our value which is another function right yeah so the thing we like disc earlier use memo yeah we can use just just check that if it works just copy it and just change little bit okay use memo so our function what was our function uh dbce this one and this will return no uh you said earlier like it should return we use Arrow function right yeah uh so it will this will don't need curly brackets it's okay automatically it will return just so it will return a value which was already a function so yeah now do it for throttle also make 1,000 yes check it now yeah is working yes that's right now we are returning a function using use memo right that's so the thing which we have discussed earlier we are doing it in practice so we can do using both ways but this use memo is longer use call back is shorter but we can use doesn't matter so just comment this out use memo thing and use use de bounds okay we will use the use call back once right yeah okay uh now we are going to create our guns and bullets the count of bullets okay I'm just commenting it out l right and okay let just comment out okay so we have a bullet three bullets uh three guns one is the simple one is debounce and third one is throttle and after each gun there should be a second div which on top of it will contain the count value yeah okay uh it doesn't have to be on top of we can put right side by side it will be easy okay uh so there are three divs and so there are three rows okay so just and also before you uh move I wanted to tell one thing yeah uh uncomment this code yeah this code and the place where you are creating the place where you are creating this uh throttle and debounce function yes is it right place do we need it to create here we can use like outside the functional component also yeah so do that yeah and then we cannot like use call back yeah and we will not need that right because it will not reender every time yes I wanted to tell you this but I forgot yeah so generally we import these functions from low Dash or some Library so this is we can say outside of our function now just check once just to verify that it is working and then you can okay yes yes yeah okay now you can make that okay uh so we have first container which will include our first gun give it normal gun name that class ID class name normal yeah okay and there will be a okay until you write this uh I'll be back in 1 minute okay okay okay yeah uh we don't need that class name for count but yeah we will have three bullets so this will be second container third container normal gun uh debounced gun and throt what was the spelling yes was right yep throttled gun because was the normal gun normal bullet we don't require that normal [Music] bullet Okay so we have three guns and three span okay and whenever we click on our guns it will update state so we have to maintain three state okay and one is normal State noral okay okay it will start from zero it will start from zero sorry we start from zero okay uh handle change debounced let's call it debounced and call it there and we can use it Deb also and we just pass the count increase the count value right okay whenever we click on the normal assign click here handle normal click let's write a function and it will increase our normal State variable so set normal State 2 greater than one and we will just console it uh sorry render it here normal State okay then comes our T bounced gun okay I'm back okay I have created the normal gun uh the divs for all the normal second and the third right the throt yeah and I have assigned a normal click which will update the previous Val increased yeah so let's assign some CSS also so that we can what was our class first container okay it will have uh like a height of 100 pixel sorry let's make it bigger container is there 300 pixel and our normal gun is there it will so yeah you can use some common selector for guns and then we can give different colors using those uh specific class you can use normal gun gun yeah you can use gun class on everyone yeah and we just have two we don't need first second second third we just put container here yeah it will do put so container will be height of 300 display Flex it will work right and inside that a gun will be there gun will be there and it has height of suppose 50 width of 50 right uh bullet uh so have we missed anything no it is not highlighting you are you missing something I you are using can you see no gun is predefined or no I don't think so it is not predefined only for gun is it happening like that bullet is highlighted yes let's give it gun one no I'm missing okay what is that yeah yeah just think what is that okay although it will work it will not give error it it will work but you are trying to use SAS in CSS file I'm trying to Nest the CSS files right yeah okay that's why it is happening yeah just put it are you saying it will work yeah it will work and now the browser suppos supports nested CSS selectors it has been happened recently only six seven months or one back earlier this was invalid CSS yeah okay okay let's go with uh Hy 3 display Flex let's put a gap of 20 pixel between them bullet bullets height will be 20 pixel width will be 100 pixel look 50 Piel we have our container which are 300 pixel display flag gun is there okay oh no we don't have any background color how are we going to gun uh no we have to put it in gun let's make this Black Bullet will be red okay very beautiful gun yes it's okay we don't need to make like a gun we can imagine it is again reduce the Gap it is Gap is more uh okay no no why there is so much Gap what 10 pixel no no like you have given show me the why there is so much gap between okay the container height is 300 pixel it to 100 pixel containers yeah yeah that 100 would be good no 200 was good that was good enough okay yes and if I am clicking any time this is the normal gun it's increasing the count right yeah and use that count in H1 so that it looks big and clear and also Zoom your browser a little bit okay H but if you use H1 it will come side by side so you can use span and give font size some big font size okay say that this is a count right so I count one here for size 18 pixel would do good no no give it 42 pixel okay yeah that is good that is good enough and also Zoom your browser a little bit one 120% or yeah that is that is good okay uh so our normal gun is ready right yeah uh come back to our problem statement we have our debounced gun so we have our handle debc click right yeah we can use that which we have yes we can use this one debounce change where was it debounce change is here what it was doing handle change debounced and it will not receive any it will receive the e but we don't require it uh so and we are setting the value also set debounced okay but we have to increase it increase it uh what was we are using earlier but let's WR like this and what it contains let's do it for throttle also and assign the throttle one here where was it this one total change uh and we will use the debounced input here and throttle input here let's verify once we are doing it close this debound change will be assigned here dbon change is this what is it doing it is debouncing after 300 Ms handle debounced function it is increasing our value yeah just verify these functions okay uh and change this is also increasing by value by one it is giving some is not defined okay sorry we are not using these ones right yeah okay should I just check it yeah you can check now okay it is updating after I am pausing for that millisecond yeah so Dev is working but logic is not that okay correct you said like we have to update the final count aftering yeah so let's say if you have clicked 10 times once you pause it should be 10 not one okay uh let's make some changes debounce changes here handle change debounce is here and then it will increase the state but I have to increase the count to the final ones so okay so how many times our debound change will be called call how many times okay handle change re is here but it will okay so we have to make some changes to our D function no that function is correct okay we have to maintain some somehow maintain the count how many times de change has been called yeah okay okay uh uh I'm calling again and again right so why can't we this is the function can we uh maintain another variable for that and pass a normal function to count the number of times it has been clicked yeah you can okay so dbce change is called also but first let's call a function which will store the number of times it has been called okay uh I'm using two another States two other states to maintain how many counts has been there and so is it required to use the states is it required to use State uh we can we use use ref if you want it's okay you can use doesn't matter okay you should get the desired output okay just one thing if what we what if we use the normal variables no let's just go with the state ones and then discuss about that right uh and sorry okay handle normal count okay set debounced input called to be this one so many functions I have created I guess we can optimize it throttle throttle to input called to we have initialized with the zero okay and we will call it here okay and again same [Music] thing this will be throttle change and this will be handle throttle count and and and it will update again and again the same thing so whenever we are assigning the value we'll be assigning the value of the bound input right uh okay looks good to me uh is it can you see any error or something or we should go to the browser okay you can check uh you can try but don't to think yeah every time when we call it this throttle change function is will also get called every time we click every time we click the throttle change function will also get called and it will try to update whatever is the current value of handle throttle count like other variable which you have created okay every time it is clicked but it will be uh yeah debounced right yes yes yeah yeah you can try it okay okay uh this was working fine no no this is not updating handle DB called is called right on click let's see it has been called or not this one right this is being called previous value was obviously zero Deb input called was 10 but it is not getting reflected why uh it is not getting reflected why because can you check what is the value of T bounce input called where it is being updated uh like where you are using it to update okay the variable yeah yeah put the there yes and let's go there this is value zero because it has not been set the earlier thing we discussed right it hasn't been rendered and it was okay okay uh how should we do it we have the value right we just need so what if we use throttle input called there but it will keep increasing as uh we will click there right yeah so we want to increase the count variable but reflect only after debound change have been called but it is getting called again and again yeah and it is getting called again and again so what uh debounced but okay let me think for two minutes how can we input is there CH there is it because of the state that we are maintaining for the input we can use the ref variable right and that will be updated without reentering the component yeah you can try that yes I'm guessing uh that was it uh no debounced and total Okay so we're not stating any update we're just increasing the ref value it will be increased and okay yes yeah it worked because I'm guessing uh correct me if I'm wrong uh we we we were using state state variables and every time our function was getting called it was like the same thing that was happening with the set timeout yeah set interval same thing it was remembering old value yes it doesn't get updated immediately until like it takes some time right uh to update updat the but use ref update immediately like just at the moment after updating you can console log it also yep yep yeah and it does not uh render on the screen yes yeah okay now let's all our guns okay yes I'm clicking like continuously here yeah it is after one second it is updating right yes and if I am pausing then it is updating this is continuous yeah that is that is good now we have made our guns we can we can make real bullets and animate it but it it will take long time y yeah you completed it on time right 810 you started and 89 or it is very good kind of good playing with it yeah there is no real use in application but it is good for understanding like how we will use it yeah now you can stop sharing your screen and we will conclude the interview so how was your experience uh experience was fine like we have done earlier interview yeah interesting question again bullet gun was yeah I got to learn like I have to practice some some concept of Basics react yeah I forgot how they were like supposed to do because in the company or in your like field of work we always used to write some component use cont API and this we never go back to the basics things yeah so we tend to forget all those so yeah I need to remember all those but yeah it was fun and interesting to that machine coding problem yeah yeah still you performed very well like your fundamentals are strong there is always an scope to improve it doesn't matter how how Master you become yeah y so I will give you 9.5 points [Laughter] that's good for this interview and if you have any questions you can ask yeah I I remember last time I was asking what are you doing these days you said you are learning noj yeah so we as a viewer of your channel when can we expect the noj scor okay that is the most ask questions on my YouTube comments yes so at least at least 4 months from now okay okay and at Max uh the end of year like next year January I will start at Max so uh one more thing I like to mention uh I was you react okay his power went off I think let's wait for a few seconds hello yes yeah I'm sorry power was cut yeah it's okay no problem you're telling react video you watched yes I watched your react video and in the first three to four lectures I have learned more than things then I have reading react from anywhere else like how the Babel does the things how the react gets compiled how we can visualize the virtual Dom I was amazed to see that uh I have like purchased one paid course also of theact JS but never get to learn those things so yeah that that's why I was waiting for the nodejs course I am also learning noj but the way you taught it feels very raw so yeah I'm very thankful to you yeah so I already know nodejs that are taught in those courses any nodejs course but I don't want to teach like that I want to teach like the way I teach react and JavaScript so yes yes after I teach it it will feel like 2 + 2 is 4 that much Clarity you should have or anything so yes yeah just wait wait yeah I'm also excited fores lots of comments are also there in your videos where is the noes who's coming yeah I waiting ask this okay and I'll be more than happy if you like invite me more or if I am able to come here more okay sure I will I will keep inviting regularly for more crazy questions okay yes it was really nice some like good vocabulary of questions you have interesting ones this question I just made up just half an hour before your interview on my mind okay okay okay uh it's really nice interviewing you aines okay see you again bye yeah it always feels nice if you like this video then it will definitely like this video which is coming right here and if you want to take your front end skills to the next level then check out my complete front end development course free of cost I have provided its Link in the video's description I will see you in the next video till then take care and bye-bye

Channel: ProCodrr

Views: 7,175

Keywords: Frontend Interview, HTML Interview Questions, CSS Interview Tips, JavaScript for Beginners, Entry Level Web Developer, Mock Interview, Frontend Developer Skills, Fresher Interview Preparation, HTML5, CSS3, JavaScript Interview, Web Development Interview, procodrr mock interviews, procodrr, Senior React Interview, Best React Interview

Id: oZD2fUzmtgg

Length: 99min 24sec (5964 seconds)

Published: Mon May 20 2024