React.JS Mock Interview | Interview Questions for Senior React.JS Developers

[Music] uh hello rakib how are you doing so i am jose and i'm a technique that tuning and i'll be taking your interview today okay i'm montreal canada uh and at durian my main focus is on hiring the best engineers and help them with the vetting process i have more than 17 years of experience in this software industry with expertise in javascript and i have been giving and taking a multiple interview and i hope this turned out to be a great experience for you how are you doing how is your day doing so far hey jose really nice to meet you um i'm rakib from bangladesh uh it's an absolute pleasure to be on um i've been programming for around eight years now and i started my career with technology such as java but in the last few years i've switched to javascript based technologies and i absolutely love what i do and i'm really looking forward to this interview nice and i don't know anything about java i never heard i never wrote any language of java my my focus always was javascript so um okay let's i would like to hear a little bit more from your side so could you tell me about yourself and tell me what kind of language project have been work on uh what um what's language uh framework so what is your expertise now so uh like i said before i've been working for maybe the last eight years and uh i've kind of moved from company to company i've worked as a contractor with companies i've had full-time jobs and because of that i've had to use different sort of technologies recently i've done programming with java written android apps i've also written some ios apps recently it's mostly been javascript i'm trying to think of an interesting project that i worked on recently um i guess one of the uh let me talk a little about the one that i've been working on right now um it's a finance app for a company called melt water they have their own kind of apis that they have their own system that keeps track of stock markets and cryptocurrencies a bit and i i was tasked with writing a front end for that that basically consumes those apis and shows the ui in kind of a format that their analysts need nice and what technology uh have you been used there okay so for the front end it's um it's been exclusively react um i did not have to do any back-end stuff there because the api is where i'm giving all right and do you use any framework with ref. js or just react yes just valuable reactions just react yes and uh the project is uh the project is built on top of class-based components or uh functional components with real it's so it's a it's a recent uh project uh like i i was part of like it i mean a lot in a lot of cases you have to deal with legacy code basis where uh since this was this was started maybe six months ago i decided to go with functional convenience good choice i believe i believe good choice but do you have experience to work on projects uh with class business and components as well yeah yeah and in your in your understanding so how would you explain me okay the difference between uh work with react class components which is the old version that's considered the old virtual now and with uh functional components with direct hooks so what's the difference between them and if you are going to start a new project today which one do you choose so it really depends uh i will first answer which one i would choose and then use that answer too [Music] so if the project does not have a lot of complicated state if i don't have to manage a lot of complicated state i would choose functional components it's easier to think about it's easier to reason about [Music] i really like folks they they're very easy for me to reason about but if the project had complicated logic if i wanted more control i would probably react class components because life cycle books not all of the lifecycle books have corresponding react hooks at the moment confusing words i mean not all of the life cycle events that you can look into in react components have their corresponding react hooks so if i wanted to use redux for example i would probably use class components but um the other way to think about is mixing and matching so uh for example if you have simpler uh components a simpler state to manage maybe a better way better approach is to just write a functional component for that and other components that require more control more granular control because you get those lifecycle codes it's probably a good idea to use asking points great answer and this is the kind of answer that i like just wanna mention that so you give me a complete answer this make total difference when i look to you i know that i can trust you uh if i ask you something if you give me questions answers like this i will love it so thanks for your questions so i've learned a lot from you uh so far uh and i would like you to explain my next question is i'd like you to explain for me let's suppose i don't know anything about react as okay so how react. js uh work so react yes i know react s is a library it's not a framework right so uh i've heard about the reactive virtual dom how could you explain me the reactive virtual dom uh to me so uh the way i would explain it is imagine you only know html and you don't really know programming beyond html right and now you're writing your own html elements that you know you're writing a p tag and it does certain things you're writing div tag it does certain things uh react would be in its simplest form uh the ability to write html elements react components with added functionality that you describe with javascript that's the simplest explanation of it you're writing html components but you're adding logic to it with javascript okay so that's one good you are good and how do you explain the reactive virtual dom for a technical person let's suppose now so i i know react.

js i am a senior developer in your company and we are talking about the virtual dome so what's the virtual dom so if i asked you about this okay so let me uh uh talk about the old days in the old days uh we would use something like j fairy and manipulate the dom you know i want the color of a button to change so i would kind of reference that i would get a reference to that button uh modify it and then directly react kind of changes that react maintains uh the representation of the ui in the programming language it's it's not the react concept the concept of virtual from maintaining the representation of the ui [Music] in the programming language itself in the code itself and then using the library to sync with the real dom in the case of react it's done with react so you're kind of creating the ui uh and maintaining that state let's say i want the color of the button to be green or red you're holding that state that representation of the ui in the programming uh object the programming language itself react dom uh behind the scenes would sync that with the wheel down and uh the good thing about it is uh it a programming language is better at deciding what to sync what changed what did not change so that process is optimized so when you're coding with react instead of you doing you manipulating the dom yourself you're using it through a virtual library means rendering processes much more optimized and great great and so let's suppose we have uh we have i mean just a comment so you mentioned old times in the for me all the times is before jquery i started before the query so it's crazy right it's a long long long time ago internet internet explorer was like the best uh browser in at the moment even better than firefox so can you believe this uh yeah so i used to program for javascript for internet exploring so so so great and my question related to the um the virtual dom again so uh you mentioned rick uh the the virtual dom is not it's not built by react. js right it's a concept so is there any other framework that use the same concepts uh with the the virtual dom to update the dom js so i think it's bluejs also does the same um i'm not sure about angular if angular yeah i i think angular also uses uh virtual dom but i i could be wrong about that okay cool all right all right one more question i'm sorry can you go ahead yeah that was my answer uh vue. js which is how it's pronounced yeah vgs definitely use the word although they it's a bit different from react.

js um and uh related to result so let's suppose we have a button click okay and in that click so we are using react hooks and in that click we have four set states so will react. js update state by state in trigger rerender or uh reactor yes will get that state get that all of that state it just trig one rerender okay i'm not uh completely clear about the question but let's say uh i have a button i click on that button yeah state changes yes uh how do i change that state so you have four calls to set state you have let's suppose you want to change the name you want to change the avatar the age of the user and then you have to calculate something it's four calls four functions that click will call four functions will react js go one by one uh set stage trick trigger render or the fjs who will set all of them and trick just one re-render okay so that's something i actually have to think about a little but uh without actually testing my suspicion is that uh there will be some optimization yeah you you are good yes you are good because there is a there's a updating badge that's uh that will that's integrate now in red js so reactor yes will update in batch so the it will uh update all the states and tweak just one rerender unless you you will tell recti as that force is remainder cool all right so and so what kind of tools for uh global state management are you familiarized with you mentioned um you mentioned redux right so uh can you explain me how redux works so redox uh doesn't really have anything to do with reactants it's a separate state management library where you create a state tree and um so let's say i have a store object where i uh maintain the entire state of the object state of the ui in that tree right and uh some anything changes i fire an event saying i fire an action saying this changed and then i have reducers which handles that and makes the necessary changes so basically redux is maintaining the entire state of an application in one object the reason it works well with react is because react can simply use that state tree and when the dui one of the advantages of redux is let's say i have an application that is crashing for some reason if someone gives me the object state the state is there any tools for that help use to work with that global state when you say tools do you mean like a debugging tool like an extension yeah i forgot the name of it but yeah there are a few redux uh potential that you know let you kind of all right because okay great all right so and how can we test uh react application what's what are the best practices in order to test object application okay so uh [Music] like um so the good thing about react is that um the data flow is unidirectional generally unless you change it yourself so let's write a component right and i the state of the component depends on the props that i'm passing from the parent right so one good way to test that test that react is kind of using some test library passing the components and checking the state okay so given the props i expect the component to behave this way okay and what kind of libraries are they familiarized with so i haven't done a lot of react testing to be honest so i would have to kind of go but that's okay that's okay right so i see people that doesn't work with react uh testing uh too much unity testing too much right um yeah there's a couple libraries that we can use the most famous ones is uh jest okay we can use the js to test correct yes applications i have used just quite a lot but not in the context of react yeah and there's like a lot of lot more libraries that you can combine with just uh jasmine uh to test react applications so if you are looking for tests so you can test unit tests you can have functional tests you can have ui tests okay css tests so when i say cs test and i'm not saying that you're going to test uh the cs itself you're going to test the ui after uh render you know there's a library called backstop. js that use uh image compilation and highlight uh css chains yeah and then there's a lot of tools for um functional testing that we can integrate to it and test react js application okay but that's okay because i know uh i've seen people not testing react yes they are relying on q and c uh qc team test which is also uh another way to test or object yeah i probably need to look into yeah it's always a good thing to write yeah uh okay so do you have any experience uh deploying a react application um yeah some experience with deploying react so normally what i do is just build the application and then serve it with something like nginx like i've mostly served it with nginx okay great do you have experience with docker or let's say with docker do you have experience docker too so yeah like i've um like most of the time i write apis i use to containerize them okay great so i love docker so i don't see myself working without docker anymore uh especially because in a few companies that you are working on has some security policies you cannot uh i would say install anything in your mac on your pc so let's suppose you want to run uh node.

js so you cannot store node. js because of their policies so if you are running node. js inside a docker there you can you can do anything you want you can install npm you can install yarn you can install any library inside that docker container and then you can run your react application you can also mirror production inside of the docker right so and then you are running uh your application with the same environment production but the old school was a vagrant so i started with bigger than like years ago miran production environment and run react application run node.

js applications run php so then i moved to docker and it like it's much more easy now even for react application yeah great so great talk today sir um let's see uh what i can ask you anymore so okay um quick question uh but i i expect a great answer uh what are the best practice uh to use react js okay so it depends i mean it depends i guess it varies from company to company yeah what's your best practice what do you consider as a best practice for me uh like modularizing react that that's very important um any component like it's the single responsibility principle that's always between programming a component should not be uh responsible for anything beyond what you know simple things small things if i want something i if i if i need something reusable across my application i would create one component and reuse that everywhere so that's one of the practices that i feel is important um some of the other i i guess always using a linter is a good idea you can shut off that part of your brain that needs to think about code formatting and let the editor handle that uh what else um single components and i already talked about uh linter um i don't know like using linter kind of helps a lot with all those best practices yeah so um so for example if i want to write a uh event handler right uh instead of writing on click on lowercase something like camel case uh on capital c or icd that's better it's readable for everyone using es6 syntax is also good instead of using react [Music] you know we had that component using class components that's still a good idea uh preferring functional components over class components when the component doesn't have to deal with uh too many complicated states all right so yeah you shared a few ones that i like it too um and how about code splitting what do you understand about code splitting so generally um when i'm loading an application like i haven't uh done a lot of photographing but conceptually if i'm writing an application instead of loading the entire javascript code it's a good idea to split code so components that components that are not required and not loaded in initial node but they're loaded later when they're actually used makes sense and how can we code splits a react application uh so i haven't exactly done that i'll have to look it up my sense is when [Music] yeah exactly there's two to two concepts about code splitting one is modularize your application create small component that you can reuse them uh the best practice are uh don't import uh all your functional components with aesthetics for example that will be hard for webpack to split the code and load only the the components that will be loading that screen so the best practice load component by component uh create small component that then we can manage that by webpack uh great rec app as well to code splitting and make the application load faster so that's what we are looking for right so performances performance scalability and make everything work fast right all right so so thanks for your interview today i have a couple more questions we can have another meeting to talk about another question i can like you i would pass you for sure for for the next step at duty uh and it will be my pleasure to work with you would like you on my team i would like to work with you and uh that was my final question and i'll give you a tip for our uh audience so if you are looking for uh react yes uh positions okay uh this question that i asked today it's a kind of question that we usually ask them uh i mean not this way so because the interview is unique uh by by by developers so i i like to go over their their experience and ask questions and follow up questions that's why uh the interview is unique pair developer right so if you are looking for a job go to tutoring. com as less jobs find the job that you would like to work with uh create your profile at tutting uh and then when you pass through the veteran process uh you'll be right to work and i'll be more than happy to interview you for one position okay as that said thank you rakib uh uh that was my pleasure to talk with you today and as i mentioned before i would pass you for sure i'd like to work with you great talk today and i hope to see you again okay any final uh tips advice for who would like to learn react js so about the the the vetting process for our audience um i i i would just say get started a lot of times we think about you know i'm going to read this i'm going to do that i would just say you know start writing react but it's not very difficult once you start it's very easy to pick up and a documentation at react js. com or vijays.