React Interview Questions | ReactJS Interview Questions and Answers | Intellipaat

[Music] hello everyone welcome to this session on react interview questions today in this session we will be talking about react which is one of the most important front-end technologies when you talk about web development so today in this session we will be talking about some of the most important interview questions which can be asked you while you apply for your next interview right so let's get started but before we move on guys if you haven't already please subscribe to the entire path channel and also click on that bell icon to never miss out on any updates from us so now let's go ahead and get started with the agenda all right guys so first we will talk about some dom related questions and then we will move on and talk about the architecture of react once you're done with the architecture of react we'll move on and talk about some questions on redux and then we'll talk about event types in redux some questions on that all right guys after that we'll move on and talk about the stateful components in react and once you're done with that we'll talk about binding and react once you're done with that finally we'll be talking about prop types and then we'll end the session so guys this is the agenda for this interview questions i hope it's clear to you now let's move on and start with the first topic in individual questions which is related to dom so let's begin this react js interview questions with one of the very important questions that is mostly asked in all of these interviews so to begin with we have the question which states uh differentiate between virtual dom and real dom so dom as you already might know it as the document object model and there is a specific working with respect to react on virtual dom and the usage of real dom as well so more on that in the next couple of questions but then the answer with this question the way you're supposed to approach this is very simple just give them the concise difference between the virtual dom and the real dom for example uh when you consider working with virtual dom it is actually a little bit easier in terms of usability rather than real dom and then there's a lot of memory wastage which happens whenever you work with javascript objects and uh here when you're making use of virtual dom memory is not wasted as much as it would uh in case in the case of real dom as well and then when we talk about the javascript xml elements which is also called as the jsx elements it will only be updated every time uh you know if an element actually exists for it but then in the real dom that's not actually the case in real time what happens is every time there's a new element that gets updated right a new dom itself is created for it and then you know an object is processed and later passed on to javascript and then the browser and all of that so in terms of the back end working efficiency as well a virtual dom has a bit of the higher higher picture here and then when you talk about uh the ability for the either the virtual dom or the real dom to manipulate html directly well here uh realdom might have an advantage because it has the ability to directly manipulate html while uh virtual dom can not uh you know manipulate html directly and then when you think about compilation and the actual updates being shown virtual dom will update faster than the real dom and you will understand why in the next couple of questions as we'll be uh dealing with virtual dom a bit later this brings us to question number two question number two states what is react well uh you know react is one of the world's most popular javascript library as of now uh you know it was originally launched in 2011 it was created by the developers at facebook and it was mostly meant to provide a nice pipeline for very good front-end development right so creating front-end elements is not only complex but at the end of the day it has to be simplified to a point where you can efficiently work with the tool well react was this particular implementation it is based on a component uh based approach where uh you know you try to build each components and make sure that you know the reusability of these components are very high in a way where you can you know take these components out and make a lot of things with a lot less if i have to put it in a very simple way so react uh gained a lot of traction since 2011 and no doubt it is one of the uh you know number one javascript libraries out there and for this reason you know you can develop a lot of complex stuff be it mobile interfaces web applications or even designing anything complex right so with react it makes it all very simple so when you're asked this question make sure you mention all of these uh to add a little bit of value to your answer rather than just saying that react to the javascript library right so saying it out this way will add value to your candidature now coming to question number three it says what is the meaning of virtual dom as we just discussed in the first question so uh to give you more clarity about this a virtual dom is nothing but a simple javascript object so a virtual object is an exact copy of a real dom uh where you know it can be considered as a tree and it can be considered as a node tree which has all these uh uh you know things such as elements it has attributes it has properties attached and much more so if you picture a node tree right now where you know each of these branches can branch out into elements and their attributes and the properties that is what the virtual dom would look like and then when you think about react react uses something called as the render function where it actually creates a tree it updates the tree based on the changes that happen in real time you know with respect to the data model and then present the changes that you have done out to the browser right so it is very similar to this and virtual dom is in fact used for that as well and then when you think about all the uh changes you know either performed by the users or if there is an action which has led to a cause you know which changes something then again the render function is called the virtual dom is put into uh put into use the object of it the object is used and then the working of it uh goes on in an order as we'll check out uh in the next couple of questions coming to question number four uh it states what are some of the important features of react this question can be answered in many ways because react has so many different features that you can talk about you know you can go on 10 minutes with the answer for this particular questions but then the most simple way i would suggest is to you know pick out features uh that will help you portray the uniqueness of react right so i have uh three points on your screen that you can use to add a lot of value the first thing is it says react makes use of a single directional data flow model again this is only native to react why while its development was and it is it is in a league of its own uh the single directional data flow model works very effectively it's very rapid and it is used to it is used to just make the entire process of designing and developing a front-end solution very efficient and then when we talk about the ability for the front-end development language to you know have uh control over server side of things well yes react has the ability to completely control the server side data processing abilities the handling of it and then merging it in terms of creating a pipeline where you'll be using it for your front end requirement as well and of course we spoke about virtual dom so react uses virtual doms and this in its own stages has multiple advantages as well so you know you can name three or four points which makes react very unique in a way where you know your answer is concise and uh you know you keep it precise at the same time now this brings us to question number five uh which states what is the meaning of jsx jsx as i just previously told you is the abbreviation for javascript xml so it's nothing but a very simple file which is used in react to make sure that you know you hold together this essence of javascript and react in a way where you know there's a lot of advantages of using these together so uh you know when you think about working with html and javascript a jsx file is basically used to bring out the html file make sure you have the ability to make use of the html syntax in a very simple way and at the end of the day of course yes the syntax is uh you know very readable in a way where you can understand a lot of things even without having to know what it does exactly and with this comes efficient programming and of course good performance to the application if you have to take a look at an xml file javascript xml file uh there's a quick sample on your screen right now uh there's a render function we're returning where we're printing uh the h1 header uh to be hello and telepath learners right so this is a very simple xml file the javascript xml file and in most of the cases it is as readable as this even though there's only three or four lines uh even with more lines a jsx file is very much readable and you can very much contemplate and understand what's going on there as well now with this we come to question number six question number six states can browsers read a jsx file the answer you have to begin with very simply is no directly browsers cannot have access and read jsx files right so what basically happens is you know whenever there's a browser which needs some changes to be portrayed to the screen and it has to be rendered by javascript programming languages the browser can only read an object and this object is directly provided by javascript now the case comes in a way where if you answer no then how do you make a browser read a javascript file it will be the follow-up question you'll be asked if you're saying no so to explain that aspect of it as well you know to make a browser actually read a jsx file it has to be first converted into a javascript object using something called as jsx transformers and only after using jsx transformers can uh you know they actually be shown to the browser and the browser making sense of it as a javascript object and then you know it will work further down the pipeline so unless your browser sees the javascript object it cannot understand uh jsx files directly guys so with this we come to question number seven question number seven states why is react so widely used today right so from 2011 uh from the developers of facebook it has been seen a lot of traction and a lot of people are jumping on react uh not only for its uh uh you know ability to uh create very good uh environments working environments easy ability to work with other frameworks or whatever it is uh it has created a plethora of job openings in fact and that is one of the reasons why everyone wants to get on the react train because they know this is one of the top development frameworks out there right so if you make use of it and if you want to build a carrier in it it could be very lucrative at the same time now coming to some of the features of why react is actually widely used you have to understand that testing is a very very important part about development frameworks right so here as well with react making use of testing methodologies for your user interface becomes extremely easy and uh the another important thing is that you know react can talk very easily and work very well with other frameworks such as angular vue.js and much more and coming to point number three uh we're talking about readability of code from that time right so the ability of you to understand the code as soon as you look at it is very very high which makes sure that you know you can have an easy understanding of what's going on with the code and help you work in an effective way as well and now when you talk about how react is uh being used for both front end and server side requirements where it has the ability to you know plan maintain hold some data and then work with it oh well here is the biggest advantages of why uh react is being considered today and at the end of it of course with all of these applications comes very good performance and with all these features it brings about a sense of efficiency which no other you know framework has seen before so this is this is one of the reasons why uh react is considered to be as popular as it is today now coming to question number eight uh you know this is this is a common question as well this question has a very high probability of being asked if you keep on talking about the advantages of react the interviewer can ask you about uh any disadvantages uh with respect to react as well no matter the amount of advantages even though they outweigh the amount of disadvantages directly there are some limitations when you talk about react so uh since we're making use of javascript xml here and something called as inline template formatting what happens is that whenever you're writing code it tends to become a bit complicated at times and uh you know especially for beginners it will be very difficult for you guys even though the syntax might be very readable but then this syntax is complex on its own to understand its structure as well so with respect to that understanding methodologies jsx and everything beginners can find it a little tough uh you know to work with these as well and then we we're talking about react we had contained the huge repository of information where you know you have to learn a lot uh before implementing and of course your implementations are gonna be very powerful but then to get there you really need to have a lot of knowledge and information right so that can get a little overwhelming as well and then we're only talking about learnability but then when you really have to concentrate about uh the simplicity of react yes it is simple and this pose has a disadvantage because it is not a complete framework so you will have to have certain dependencies along with react and of course if you have to use them together it means that you have to learn whatever it is required of the dependency and learn react at the same time as well even though it sounded like an advantage of the first half uh you know now you get the clear picture of what some of these disadvantages of react are this brings us to question number nine which is a very simple question it says differentiate between angular and react both of them are amazing frameworks right so when we talk about angular angular is actually developed by google while react was created by facebook uh the usage of dom angular uses the real dom and react makes use of the virtual dom and then we're talking about rendering our rendering happens in the client side with respect to angular and on the server side when we talk about react the architecture is again a very simple one angular provides support for model view controller the complete mbc support is provided while react only provides the view aspect of the model view controller so when you have to talk about data binding angular uh takes a bit of a side step here because it only supports unidirectional data binding while uh you know react has the ability to completely support and uh you know champion two-way data binding as well so uh you really don't have to explain a lot when you asked about angular and react because at the end of the day these two frameworks are meant for their own niche uses and both of them are really good at what they do so just make sure you highlight the basic differences the actual differences that lie in between them and that should be more than enough to get you on to the next question and the next question states uh you know what is the meaning of the component based architecture of react so one very important thing about react you have to understand uh is that every single entity is considered to be a component and these components are like the foundations which are used for building user interfaces for web applications so when you have a component based uh system you know what happens is that every single entity will become completely reusable in a way where so you can move it around replace it and once it has the ability to become independent of each other right so this is when you are extremely efficient while programming itself and your application becomes efficient in a way where you know it can reuse the components rather than uh having like 10 components in the place of one which would again uh cause very high redundancy which is not good for programming and which is not good for execution as well and then when you think about rendering the applications with a component based architecture the rendering becomes very easy and it does not depend on any other components of the same user interface as well so when you think about it again it's completely a huge advantage for react and it is only because of the component based architecture so with this we can move on to question number 11. question number 11 states uh how does rendering work in react you know rendering is a very very important aspect of react as you might already know it as you know every single component that exists in react if it has to be seen by the user or by the browser it has to be rendered and rendering in react can be done by using a function of the same name which is the render function so what actually happens is whenever there's a function uh that is called right so after it is called it returns an element that actually represents a dom component and what happens here is that if you're wondering can we uh you know have more than one html element at a time to be rendered to make sure that it is efficient well yes it is possible to render more than one html element and how is this done this is done by uh you know taking all the html tags enclosing these tags and then passing it all to the render function one by one uh to make sure that they execute concurrently as well so rendering is a very important aspect and this is why so coming to the twelfth question uh it states what are the states in react so states is something which is very important you have to understand about react as well because it is one of these vital things because it is the source of data or you know it can be considered as the objects uh which control various aspects such as component behavior component rendering and much more so states of the name suggests itself is used to or you know easily create uh these interactive components that we like in all react applications and of course uh to create the dynamic applications as well so as a serving foundation states is very vital uh in the working of react with this we can come to question number 13 uh which states what are the props no so what are the what are the meaning of props in react well props are actually a short name given for properties in react uh you know so whenever there's properties uh we talk about and react all of these are read-only components which are completely immutable in nature so they cannot be changed uh as in when you require a real-time right so whenever there's an application what actually happens uh is that you know there are properties which have an order that is passed down to them uh from let's say the parent components to the child components and then these properties are matched to each other and then used but then if you're wondering can we have child components which can assign properties to parent components well no that that cannot be done uh this is done only to make sure of the concept that we already discussed it's called as a single directional data flow so to keep the data flowing only in one direction even in this case uh to keep the data flowing from the parent components to the child components and the properties associated with them props are very vital to be used in react as well and then coming to the 14th question it states what is the use of an arrow function in react so you might have used the arrow function or you might know how to use the arrow function as well so it is a very simple expression that is used in react in case if you have the requirement where you know you have to bind certain components manually the functioning is very simple it is very direct and it is very helpful when you're working with something called as higher ordered functions as well again we have another question for a higher order functions as well so we'll check that out there but then coming to uh the usual example of where you have to you know manually bind components you can see uh my input on change equal to this dot handle change and bind to this this is how you manually bind it right now there's a fun way if you make use of the arrow function so instead of directly saying it that way all you can do is to enclose the function and use the arrow function as you can see on your screen right here so this arrow function is another way where you can you know use it here in this example of course the syntax is very simple but then uh if binding your components can get complex uh when you're using a large piece of code uh this will simplify it to a very good extent with this we can come to question number 15. question number 15 states what is a higher order component right so as we just discussed in the previous question a higher order component is a component yes but then when we talk about it in general it is actually a technique that is put in place uh for react where you know we make use of this uh entire architecture based on something which you already discussed right so it's the component reusability logic so to apply all of these components we have something called as the higher order components and uh one thing that you know you should always mention while answering this question is that they are actually not a native part of the react api at all and what actually happens here is that it will allow the users to reuse whatever piece of code that is required have some bootstrap abstractions if required and much more and it's not only this with higher order components what happens is that it will allow for very very simple sharing of you know any sort of behaviors between the components in the component structure and then doing this again we will circle back to one very important thing about react is that it will give way for high efficiency and easy uh functioning of the applications well uh with this we can move on to the 16th question which states what is the meaning of create react app in react well the create react app in react itself it is actually nothing but a very simple cli a cli as a command line interface where you know you can use it to create react applications where you have no build configuration and using this is very simple in a way where all of the tools come predefined and pre-configured with the cli so uh doing this uh is mainly advantageous for you as a developer because at the end of the day you will be having the ability to concentrate more on the code more on the logic uh you know all the dependencies rather than how you can work with syntax or the complexity of actually building the application and much more right so it's a simple cli and you can use a syntax as shown on your screen to start a very simple project and react as well it's called create react app space my app my app is being the name of the simple project that you want to start so with this we can come to the next question that states what are some of the advantages of using create react app in react so we saw what it is but then it has certain advantages which make it stand out as well so you know with create react app one very important thing is it has the direct support for javascript xml flow statements and es6 statements as well so with this what it will do is it will make sure that it is very simple for you to work with without worrying on on a large piece of code that happens in the back end and of course it will provide you fast interactive testing components and line development servers which are very very very vital when you're working with debugging as well and you get direct scripts which have the ability to handle jss css and any other file that's required as well and then your css is already auto prefix it is ready it is built in and uh you can use it thoroughly as well so with these five or six points that you can mention uh for the advantages of using the create react app and then this will make sure uh that you know that you're proven to the interviewer that you do have a concrete understanding of the foundational concepts involved in react as well coming to the 18th question in the 18th question states uh you know what is the meaning of redux redux is again a very important aspect of react in a way where you know redux is actually used to store individual states of these applications so every single application will have a state and then uh to keep it very simple we have to store it in a single entity and using redux we do just this so if you're thinking about is redux the javascript object by now the answer is yes this entity that gets stored into the status that holds the state of an application is actually a javascript object so changing the states can be done whenever you're pushing out any actions from the applications or whenever uh you know you are writing the corresponding objects for these particular actions mapping them while uh you know while you're modifying their states as well so a simple uh a simple redux object to show that your screen first name is john last name is kelly age 25 so to retain this first name last name age in a state in a in a single entity this is where the javascript object called redux comes into the picture so all of the data that gets retained by the redux so sometimes if there is another name for it the interviewer might ask for a store so well a redux store or it is just called as a store uh where the data is basically stored now with this we come to the 19th question which states what is the difference between props and states props you already saw it says properties states we already checked out as well so there are certain simple differences that we can check out in the conditions see for example the ability to to perform any changes in child components for the properties yes you can change it with respect to states you cannot change the child components now can the parent components change values in the case of props yes they can change it for their child components in the case of states no so then what can states do in these conditions that we're talking about right so each individual component can changes be done inside each individual component so that is where when you ask that condition uh of course with properties you cannot change because then this this defines the entire working architecture of properties and the component object model right so in in the case of states yes changes can be made into the components and this is one very simple uh yet elegant difference that you can put out when the interviewer asks you the difference between props and states now with this we come to the 20th question uh the 20th question states what are the three phases that is involved in the component life cycle of react this is a very common question this is among the first top 10 questions you will always be asked if you're going into a react interview because it's very simple at the end of the day and it denotes your understanding of the concept because when we talk about the three phases of the component life cycle it involves initial rendering updation and the process of unmounting with initial rendering which is the first phase this is where you know the entire process actually begins you know the component goes to the dom and all of that and then when you talk about updations this is where the component has the ability to be updated uh you know the code to be changed it has to be rendered again if required and then it gets uh added on to the dom and the unmounting becomes third important phase where uh you know this involves the destruction of the component and its removal after it is not being used after its rendering is done and after it is no longer in the viewing base of the viewing platform of the user right so it has to be removed from the dom to make sure the application is kept efficient as well so first we render it then we update it and whatever gets updated and re-rendered gets into the dom and after which we have a component which we do not use we remove it it's pretty simple guys it's initial rendering it's updation and uh uh you know it's unmounting so with this uh you know we can check out the 21st question so the 21st question states uh what are events in react you know events are these important things probably the most important things that happen in the entire react architecture right so think about this whenever you perform any action right so like moving a mouse on the user interface of the application or let's say pressing a keyboard uh key on the keyboard as well so what all of these actions pertain to is that they'll they'll trigger something called as an event an event will then do a certain set of steps it'll perform a certain set of activities in response to these triggers right so the triggers are the uh mouse pressings the mouse movements or the keypad or the key presses on the keyboard now to perform certain activities in response to this uh is a good example of what uh what events are and uh you know think about the dom architecture and and then when you think about the working of the dom architecture handling an event in react is very very much similar uh you know it's very much similar uh to that of the dom architecture as well so with this we can come to question number 22 which states how are uh you know events created in react now it is always advantageous that you answer questions like these with a small snippet of code right so ask for a piece of paper or in case if you have your laptop in front of you just whip up a tiny piece of code uh where you can actually show how you know events are created and react as well and they are created in a very simple way first we have the function where you'll have to put in the logic for the code and then of course with the render function the render functions you know whatever is in the div that will be rendered uh you'll have a and you have the functionality of the div as well so on click this dot show click here so the message click here will be uh displayed on it and as soon as you click there uh the code uh basically will go into uh the segment which is a sure as code inside so there you have to devise and uh work on the functionality of what response you should provide when a user would click on that button for example so with this uh we can move on to question number 23. question number 23 states how is rooting and react different from the conventional routing that takes place in other frameworks uh it's very important that you understand the subtle differences that lie in between conventional rooting and rooting and react in two aspects one it's by using pages where you know when you think about uh when you think about react here every single page is actually a new file that gets mood mood around in conventional routing in case if you use conventional routing right so but then in react this is not the case each view is not considered as a new file in an explanation where all of these files become one single html entity so instead of having a new file with the conventional routing methodologies here we have one single html entity that can uh deal with all of these so that's with respect to pages and then when you have to talk about navigation right so in the case of conventional routing uh users will manually have to move across different web pages to probably uh you would view different things and every time this is done the view model is basically refreshed right so whenever you click on different pages every time the website gets refreshed the application gets refreshed in the case of react that is not the case the view will remain the same the view is not refreshed because because of only one important thing is that the objects are reissued here to create new views and new objects are not created here guys so creation of new objects updation of the dom model will create a scenario where the page automatically refreshes when you click on the new website but in the case of react that does not happen so this is a very important difference between conventional routing and the routing that happens when you use react coming to question number 24 uh it states uh what's the difference between flux and redux in react well we're going to check out flux and reactor both in detail but then to answer this question in a very concise way you can name about four or five points uh where you know in case if you're talking about flux uh it contains the logic and the state of the applications uh in the same place where when we're talking about redux that is not the case the logic and the states are stored in separate places and then when we talk about states flux has mutable state it can be changed while updation in real time while uh with respect to redux the states are immutable and then when we talk about the number of stores uh you know we spoke about stores a bit before uh flux has only one store and redux has many many stores and then if you're talking about a dispatcher or a handler flux does have a displacer while uh you know react does not come with dispatches and then of course components uh components are connected to flux in uh in react directly and then when we talk about redux uh you know of course since we're talking about redux the container components are directly uh connected guys so uh you know when you think about the basic differences that exist between flux and react uh you know one is the presence of a dispatcher the other one is the ability to have multiple stores are the data being mutable the states being mutable are more precise the and then these and then the separation in the storage of the states and the logic so these four five points are found to be the foundational differences between flux and redux in react let's come to question number 25. uh question number 25 states can ajax be used with our react uh so the first thing you have to start out with your answer with when you have when you have a question like this is either yes or no and in this case the answer is yes because uh you know just like any ajax library where you know you have jquery ajax you have axios or any of these libraries uh you can use this very easily with react but to do this you have to remember one very important thing is that every single component has states and you have to maintain the states here because properties are again passed down to the parent uh to the child components and to make sure you maintain all these properties and that they are correct and with react you will lose the ability to uh you know move data in two directions right it's unidirectional so once the props sent from the parents to the children uh then uh there is no way to send the props back to the parents right so this is one thing which is an advantage in terms of workability and of course in terms of rendering efficiency it will have uh it'll have a huge impact uh you know whenever we're working with dynamic data so the answer is yes to this particular question with this we can move on to the 26th question that uh what is the meaning of synthetic events in react we checked out what events are but then what are synthetic events what you have to understand about synthetic events are yes even they are objects and the simple thing is that they act as cross browser wrappers so what this does is this will allow the users the ability to make use of any of the native uh events in react alongside this as well so why is this done you know why why do we even require cross browser wrappers right so this is me this is done only to increase compatibility so by doing this you can make sure that your api can run across a variety of browser and that it does not become browser dependent so if a piece of code or an application works well on say google chrome but then if it fails to work on safari it really doesn't make sense right so to make sure that the ability of react has the outreach of multiple browsers uh we use these synthetic events to do that for us in a very very simple way now with this uh we come to question number 27 that's uh that states what are stateful components in react stateful component as the name suggests are entities which have the ability to store any changes that happens to them and hold it in a place of memory stateless components will not have any states uh because they will not have the ability to store the changes that happen or hold them in memory but then state full components yes they can store all the changes so whatever change in state it is stored along with other information such as uh you know what are the changes that happened in the past there will be a document for that what are the current changes that are taking place while the document is being executed and active rendering is taking place and of course there will be documentation of in case any future uh changes do occur as well so stateful components play a very vital role in the working of react and then this brings us to the 28th question the 28th question states what are refs in react and again as you might have already known refs is actually a shorthand for references uh so whenever we talk about any sort of references in react they used to store uh you know the reference to either one single react element or store references to a react component and what and why we do this is to only make sure that you know we can return it later using the render function to let's say um if you have any good animations that you have to run imperative animations that keep our running either on a loop or in any rapid animations then of course so references are mainly used in case if you have third party dom libraries that you have to work with and of course one very important use of refs is to make sure you have the ability to manage focus and you know apply media playback to your web application or on your website uh for it to render as well so mostly it is used in the case of media animation images and videos but then one very important thing to mention is that it is also used to join third-party dom libraries well with this uh we can move on to the 29th question that states what are controlled components in react we checked out what components are stateful components are but what are controlled components right so control components will always refer to the components that have the ability to maintain their state same as stateful components and here the data is actually controlled by a parent component so this is a child component in the first person's perspective and when we talk about this the whatever value is present here is fetched only by making use of the props that it gets from its parent component so why is this done this is done only to make sure to quickly notify if there are any new changes that occurs when we're using callback functions while rendering uh and you know this at the end of the day will simplify about five or six other steps that need to be done in case we do not make use of control components it makes sure that the code is simple and effective to work with for you as a developer and react as a programming framework as well now when we talk about the 30th question one very important aspect that we have to cover in this particular interviews questions segment is why is a router required and react router is something which is very important as you'll see and this is a question which is again very very important in a react interview so when you think about routers well routers are extremely efficient components uh you know when we talk about react because uh when we add that onto our url the user is taken from one particular component and it's basically like mapping out a route for the components so once you have a component of framework where you can actually you know walk through each of these components in a particular order in a particular root well this is why it's got the name router and there's a simple piece of syntax on your screen right now that denotes the usage of the uh router library and of course uh since we're using router the library has to be added and react and of course it can be done using the syntax so we have the root exact path we're defining the path the component is the home component then we have another component new post and post as you can see we are rooting it manually from home to new post to post right so so the router is mainly required for this purpose now with this we come to the 31st question so the 31st question states uh what are the components of redux in react right so one very important thing that you have to keep in mind while answering this question is that redux comes with four very important components it's action it's the reducer it's store and it's view so action is an object that actually describes a call a reducer will actually denote the state change that happens in the storage unit store on the other hand will denote the state and the object tree storage while view displays the data that is provided by the store so the features of the components go very hand in hand with their name so an action will describe the call the reducer uh will show the state chain that happens in the storage unit the store will denote uh the object tree storage and the states as well and then the view will display the data provided uh you have to remember the components and in case if you do not know just recall the names of it and uh you know once you get the names it is pretty easy to understand what it does and then convey the same to the interviewer as well with this we can come to the 30 second question that states what are the advantages of making use of redux well there are numerous advantages of making use of redux but then to keep it very simple here we've picked up the top four advantages of making use of redux one when you talk about organized approach right so redux requires code that has to be organized and doing this will make sure that the code is consistent the code is easy to work with and it is structured at the same time so so to make use of this your code has to be organized and then when we talk about the testability or the testing ability in general redux functions are very isolated they are extremely small to work with and testing a small piece of code is very much easier very much quicker than working with a large piece of code and then testing it later and then when we talk about tools developers can actually track actions and all the tools in react by making use of redux easily and they do not have to put a lot of effort to do this and then when we talk about the community aspect of things redux has a large community you know this is an open source community both react and redux so in case if you do require any help of you know working with redux or if you're stuck with any aspect of it of course there are users out there who are ready to help you and you know you can even get uh libraries built up uh in case if you do have a niche application as well so in terms of community as well there's a very big advantages of using redux now with this we can come to the 33rd question uh that states are there any disadvantages or what are the disadvantages of making use of the model view controller in react one thing that we've already discussed is a lot of advantages of react in these 33 questions but then there are certain uh tiny problems of making use of mvc as well when you use model view controller this three steps modeling viewing and then having the controller model all of these together will make sure that there is a slight bit of memory wastage that you have to consider and then when you have to work with the dom architecture manipulating the dom will actually uh you know take a lot of efficiency take a lot of time as well and doing this the application will actually become very slow there's a lot of dependencies that is created along with react in the case of mvc and uh you know if you have to combine all of it together and give one big disadvantages the model complexity will increase a lot so for a developer it will increase a lot in terms of workability and for react as a framework it will decrease its efficiency make it very slow and add a lot of dependencies uh you know which have which basically give you more probability of uh the application failing or something not going right so in terms of you as a developer there are certain disadvantages you have to consider and then uh react as a framework again comes with tiny bit of disadvantages as you can see on your screen now we can check out the 34th question that states what are pure components in react you know pure components components we have checked out stateful components are done so pure components are similar entities they're actually singular entities uh you know that are actually written in react so what happens is that they are fast they're simple to write they have the ability to replace any other general component that you might have and uh the only and the only important thing is that it has to have a render function attached to it because if you cannot render a new component it is deemed useless so to do this you might be wondering okay can we use the regular component itself so why do we require pure component at all well a pure component is used only to make sure you keep the application workability high to keep the efficiency and performance high while keeping the core same so since these are singular entities right so they can be wrapped around in themselves and they can be independently stored independently worked on and not have any sort of dependencies outside of the rendering ability as well so in that particular case when we talk about simplicity ease of use and how good it is for both the developer and the application pure components wins so after understanding pure components uh we need to check out where hocs are used hscs are higher order components and we've already discussed this in a previous question so hocs are you know put to use of very much whenever there's a requirement for code reusability or let's say you have to hijack current method or if you have to uh you know manipulate a state and work with abstraction and then of course if you have to manipulate properties or if you have to work with bootstrap abstraction as well so so to be honest with you there's a lot of applications where uh you know hocs are put into effective use in react but then you can mention five or six where they are the most effective and add the most value and this of course uh you know will power up your answer as well so uh manipulation of props state manipulating render hijacking code reusability and whether where there is a requirement where you have to work with bootstrap abstraction as well so these are some of the uh very important tasks uh that hocs are put in use for coming to the 36th question it says what are keys in react so as the name itself suggests keys are actually uh used to keep a track of something here so what is that something well here we'll be checking all of the items and tracking changes on uh these particular entities actively so what happens is that uh they used to check if an item has been added or if it's been removed in a list or not so only to check the presence or the absence of these items in the list we use an entity called as keys and this is a small simple syntax on your screen which shows the usage of keys in react so again uh just as with any other question that we've been talking about if uh there's a situation where you can provide a very simple code snippet or a syntax snippet where you can explain your answer better please make sure uh to do that for all the questions as well so if your question can fit a quick syntax or a quick dirty piece of code guys please make sure to do it as this will add a lot of value to your candidature in that particular company as well so understanding that we can move to the 37th question which states differentiate between controlled component and an uncontrolled component in react a controlled component as the name suggests is actually a component in which react can do whatever it wants or to react as complete control of it and there's a singular point of data for the forms where you have to you know perform state changes get it re-rendered and all of that when we talk about uncontrolled components and control components are here it's very important difference is that the data gets handled by the dom and not the react component itself so react does not have complete control over this component and how is this done this is done by making use of refs in react uh as we already checked out right so if you have to implement and handle third party doms if you remember that is point number four i think yeah so this is where uh it's used and an uncontrolled components while being handled by a dom and not react has its own advantages and disadvantages now coming to the 38th question that states uh how can you tell react to build in the production mode right so so what is the simple way of you conveying uh to react uh to move to the production mode so you can actually directly code uh in production mode but then to do it you have to set one very very simple variable it's called as the environment variable and then it's process dot emv.node underscore env and you have to set this uh variable to production and one very important thing that you do have to note is that once the react is put into production right so if there is any other developmental features that you have or let's say if there are any warnings all of these are not shown uh in the production mode so this is something which is uh you know very important for you to mention in the interviews as well so it's as simple as setting an environment variable now with this we come to question number 39 that says what is the difference between clone element and create element in react so what is the clone element and what is the create element right so clone element again since react is highly readable you can already tell by its name it is used to clone an element and pass it to new properties directly with create element create element is an entity where all the javascript xml files get converted and gets gets compiled and converted into a format where you know it is understandable by the browser and then this is also used to create elements inside react itself so create elements with help in the actual creation of elements and reactant of course to help in jsx files getting compiled as well and clone elements clones the element and then passes it on directly to new props so guys with this we come to the 40th question that states what is the use of the second argument that is passed on to set state so we have something called a set state and we have a second argument that goes to it so is the second argument are optional or not well the answer to it is that you know whenever set state is actually finished uh there is a callback function that gets invoked and then all of the components here gets re-rendered and react to make sure uh that you know the latest render is shown to the user so with this when we make use of set state uh we have a second argument there yeah so the interviewer is trying to ask you if it's an optional argument that you pass the answer is yes since that state is actually an asynchronous function what it does is that it takes in just another callback function and works normally so you know even though it seems very simple to directly do this a clever programming practice a standard good governance programming practice will always tell you to make sure to use another life cycle method instead of you know directly passing it via the optional argument as well i mean there are multiple reasons to do this but then you know they are not in the scope of this answer so when you asked about if it's optional or not make sure you answer yes and why is it optional because it is asynchronous and here it can handle the same thing in another callback function as well so with this guys we come to question number 41. so the 41st question states is there any way to avoid the requirement of making use of binding whenever we make use of react the simple answer to this is yes we can actually avoid binding when we're making use of react and it is done in two ways one is that you can define an event handler as an inline arrow function the arrow function that we discussed in the previous couple of questions and then secondly you can make use of a function component and use it with hooks to make sure that you know you do not have to bind any component to each other and work with it as well so either making use of the arrow function or by making use of hooks you can avoid the need of binding in react so moving on to the next question it states um what is the strict mode component that is used in react so whenever we talk about strid mode component one major thing that you have to know is its advantage and why is it used so uh you know whenever we create any new code basis where we have to understand what components are being used there right and then street mode components are immensely beneficial for this whenever we talk about in terms of debuggability there it will help as well because we if we can solve the problem faster whenever we wrap it with any other component uh you know it'll of course solve it quicker because uh you know that would be the one causing the problem and we've just wrapped it with another component and then worked with it right so street mode component is used for two things one in the creation of new code basis and second to be wrapped around other components to provide easy debug ability so make sure uh you know that you mention these two points with this we can come to question number 43 that states uh what would you do if your react application is rendering slowly again this is a question which is very very very commonly asked and then guys pay attention on this one uh so why do you think uh you know rendering is slow and react right so the most simple answer to why rendering is slow and react can be answered in the way where because there are so many re-rendering operations that are being done uh you know sometimes they're necessary of course if you have a very large applications but then most of the time these re-renderings can be unnecessary and redundant so there are two main tools that react will give you or where you can check this and fix this one is react.memo function where you know you can prevent all of the unnecessary renderings that takes place and whatever uh you know the function components does you can actually find what is the rendering that is not required to be done and then remove it as well and then you have the pure components of course pure components is put into place to make sure uh that you know you remove all of the unnecessary rendering in any of the class components so in both the ways with respect to function components and class components react does provide a way for users to make sure to remove redundancy in terms of free rendering as you can see on your screen so make sure to mention react.memo and its usage for function components and pure components in a way where we're talking about removing redundancy with respect to class components so with this we move on to question number 44 that states can you conditionally add attributes uh to components and react the answer is yes you can add attributes to react whenever you know there are certain conditions that are met one thing you have to know is that react has the ability to completely omit an attribute if the value is passed to it is not true right i mean logically speaking this is supposed to be done you know this is supposed to be done automatically but then many of the programming frameworks does not do this and the reactors advantages in this way as well it can completely omit an attribute if the value that is passed over at the end of the day is not true at all now check out the simple example that's given on your screen to see how you can conditionally add attributes to components right so uh we have bad condition equal to two var component we have the div value is foo and then we've easily added an attribute to the component there uh to further make use of it right so if the condition is met then yes you can add attributes to it and then that is shown in the example on your screen coming to question number 45 why is props passed to the super function and react so when we talk about properties again all the properties are passed on to the super functions if and only if the user wants to make use of this dot prop so if the user has a requirement to make use of this dot props in the constructor only then will the props get passed on to the super function so it can be shown on the screen in the example that you're seeing right now so when you talk about the constructor there we're extending the react component and we have the constructor of props so once you've made use of the constructor there we're going to use this dot props right so once you have to use it and once it is passed to the super function to have access to this distort props we make use of the super function guys so coming to question number 46 question number 46 states what is the difference between the get initial state and the constructors in react you know you have to understand that whenever we make so whenever we make use of es6 right so users have to actually manually initialize the state and the constructor and then to do this to manually initialize the state we have the get initial state function this method is actually defined by the user and worked on as well so this is done very very easily uh you know as shown in the example on your screen guys so check it out so we have the constructor props you have the super function and instead of calling this dot state so we have manually defined the state right so this uh the start state and we have given a comment there calling it initial state so if you want the ability uh to go on to do this you will have to use get initial states uh instead of direct constructors as shown here and then when we come to question number 47 it talks about the predefined prop types that are present in react you do not have to explain all of the prop types that are present here the properties in fact uh you know you can mention them and then be good with it so there are actually five very important properties predefined property types and react uh as shown on your screen uh one is the bool one is the functions the other one is the nodes we have number and string of course react dot prop types dot uh bool func node number and string are the predefined prop types that are present in react again all of these properties are used for their own niche applications but at the end of the day it is very important that you know this and you show the interviewer that you know that there are there are these predefined prop types that exist in react so with this we can move on to the 48th question which states what is react fiber well react fiber is a new engine in react so it is actually the re-implementation core algorithm that comes along with react 16. so one of the main important goals of react fiber is to make sure that there are you know incremental rendering facilities given for the virtual dom itself why is this done again the primary talk here is about efficiency as well so whenever you have to render let's say any gestures animations or anything of that sort uh this will make sure that it'll help in giving the right priority to what updates needs to happen at what point of time so again this way there is no delay or there is no latency in terms of the gap uh you know that exists between multiple renders that happen for the dom as well so this is why react fiber is a very important aspect of this and then we already spoke about hooks coming on to what hooks actually are so question number 49 discusses about what are hooks in react so hooks again are entities that are used to make use of a state and any other features in one very important condition where you do not have to write a class for them so hook is actually a new implementation it came along with the react version 16.8 and here one very important thing is that the stateful logic can be extracted from any component very easily while testing it while reusing it repackaging it and whatever you need without having to write a class specific for it that is the advantage of hooks and then this actually implicates that you can do all of these changes to the component hierarchy and all of these actually implicate that you know anything can be done here or whatever we mentioned without having to change anything in the component hierarchy as well so there you know re-rendering re-objectification all of that is again removed again working on efficiency working on easy to use feature that the react framework provides for the users as well so coming to the last question the 50th question we discuss about certifications so uh you know the question states have you earned any sort of certification to improve your learning and implementation process in react guys know this a certification program is not only a bragging right where you say that you're a certified developer but it'll give you so many advantages in terms of carrier advancements where you know it'll show the interviewer that you're very serious about understanding react implementing react and working with it and if you have picked up a certification program on your own you're trained on it uh it'll also show that you're an effective learner who has the ability to grasp new concepts and learn them effectively and master them at the same time as well so this uh either you can be a beginner who's interested in react who has absolutely no idea of how react works or if you're a person who's switching from another framework or say a programming language uh like python or something and you want to master react well of course yes you know that will add more value to your candidature so one important thing is that do not get lost in mentioning the certifications that you have or talking about that uh in in detail but then what importance is given to the answer here is to make sure what you learned from them so the importance that you have to give here is to talk about the applications or whatever you learnt from the program rather than the program itself right because at the end of the day you learn to program to implement something do talk about that implementation do talk about the projects and how it has helped you on your journey uh into understanding and making use of react be it in the learning environment be it in an actual project use case or a production environment a certification program will give you all the training and structured learning that is required uh to make you proficient in react and of course it is not only that there are multiple uh you know advantages of having certifications as well and i'm sure you guys uh you know already know this so with that we come to the end of this very important top 50 interview questions for react and i take this opportunity to wish you all the best of luck for your react interviews i'm sure you can use this guide in a way where you understand the questions thoroughly and find ways to answer these questions in an effective way well guys with that i'll see you on the next one

Channel: Intellipaat

Views: 86,070

Keywords: react interview questions, react interview questions and answers, react js interview questions, reactjs interview questions, react js interview questions and answers for experienced, react redux interview questions, react redux interview questions and answers, react router interview questions, javascript interview questions, javascript frameworks interview questions, reactjs course, react training, reactjs training, reactjs intellipaat, react interview, react

Id: 5UKe5BMnJgk

Length: 59min 29sec (3569 seconds)

Published: Wed Aug 26 2020