React Native Interview Questions & Answers 2024

hello everyone in this video we will be going through uh an impersonation or or or a hypothetical react native interview for for developers so what what I'm going to do is I'm going to uh go through the whole process where you know when you jump on a call with somebody to to to interview uh or when you are interview uh you know giving your interview for for the job role this interview uh um uh session will help you understand how things go from both sides so what we'll be doing is we'll be going through the number of questions which you need to ask or need to answer in order to either hire or getting hired as a react native developer it's going to be really uh simple and straightforward so uh you know it will have the normal questions about um uh technology but it will also cover a Bas uh base of um what uh you need to look for in a person whom you're hiring for a react native uh job or role okay so I've just added this interviewer's image on the video so that it impersonate you know the similar uh environment as you are in the interview and then I'll be asking the questions and then also answering it right okay so let's get started okay hi Ash how are you doing today I'm good thank you yourself yeah good good so um before we start your interview would you be able to uh tell us more about yourself what you do at your current job what your uh you know primary contribution to the team Etc sure um I am currently working as a a tech lead with my current company focusing on delivering complex large scale applications from Discovery scoping budgeting to completion but it does not limit to that I also look after crafting innovative solutions from both front end and back end angles um I am instrumental in designing the strategies for migrating Legacy on premise application and storage servers to the Cloud for example uh on premise servers to gcp or AWS Cloud platforms with a specific emphasiz on the reactjs as a key technology my primary contribution to the t i educate um and Define how various components modules and technologies will work together uh this indicates designing the backend using nodejs and the front end using react I make informed uh decisions about which technology and Library within the main stack will be most suitable for the project requirement um I review submitted code uh by team members to ensure it follows best practices maintaining consistency and ader to the coding standards uh while also conducting regular code quality checks and I also provide guidance and mentorship to team members especially Junior developers by sharing best practices design patterns and Architectural guidance um some other key areas I add value is performance optimization security scalability uh integration with apis um continuous integration and deployment issue resolution documentation project planning and estimation team collaboration and various other activities um this has further reinfor reinforced my interest to solve real life business problems from a technical perspective uh and my experience combined with stakeholder management make me a strong asset to the IT department of our company great thank you so much for for for your intro um okay so let's get uh into uh let's get more into the technical aspects of this role so can you please explain what is the difference between react and react native sure my pleasure um so react is a derivative of react Tom whereas react native is a derivative by itself you know react is a JavaScript library whereas react native is a framework for crossplatform apps um in react virtual Dom renders browser code in react native Native apis is used to render components um in a very simple words in react HTML is the output when it comes to D elements uh plus JavaScript whereas in react native it is uh jsx okay that's great um have you ever heard about flux and if you have would you be able to throw some lights on sure um flux uh is a architecture of react which complement react with the concept of undirectional data flow um for example I mean I mean it's not a framework or a library it is used to manage application State along with nodejs event emitter modules so in my personal opinion it's how you want react to work in sync with your States um I haven't used it much to be honest but I do understand the basic concept behind it okay that makes sense and thanks for that um okay have you ever used Redux um or or zus land and and would you be able to um tell me more about what Redux is sure sure um Redux is mostly used for application State Management um it maintains state of an entire application in a single immutable state tree um I think it cannot be changed directly uh but you can use you know dispatchers and selectors and actions reducers Etc to to you know uh change States um uh we I think we have to use actions and reducers to make any changes uh you know in the state by using Redux um so yeah it's it's basically a uh State Management uh application okay uh would you be able to uh elaborate on how we can do it um you know what kind of hooks we have to use to to to utilize Redux capabilities sure sure so one of the famous hooks we have in Redux is use dispatch use dispatch is basically a hook uh it allows you to send or dispatch an action um to the Redux store by giving the action as an argument to the dispatch variable and on the other hand use selector hook allows you to extract data or the state from the Redux store using a selector function um the other thing which would add more value to understand how redex help us developing application is uh in order to make sure the state is immutable we could use uh a package called immer with Redux uh and immer is nothing but a small Library created to help developers with immutable State um uh based on a copy on write Mech mechanism um a technique used to implement uh copy operation on modifiable resources okay okay so that's good um so what about if you don't want to use Redux and you don't need to maintain a state across the whole application but you do you do need to um store uh some data globally in your app how would you do that well in that case I would be using async storage um if if you if if the business logic tells me or or the business logic required not to use Redux um sync storage is nothing but a key value storage system that is global to that and it should be used um instead of local storage because it's better um it is an unencrypted asynchronous and persistent storage uh mechanism but we should never use it for storing tokens or secret now one thing to remember is Asen storage is kind of deprecated like you know react website or or you go on reacts open website they will tell you not to use it it's kind of deprecated a lot of people still use it but they're they're more suggesting to use other um packages in order to store uh data globally for your app okay okay I understand um okay so can you tell me what is the difference between a class component and a functional component sure sure so a class component requires to be extended from react whereas a functional component uh doesn't it just takes props and return react elements um a class component has a state and a functional component is a stateless but it can it can use use State hooks to maintain States inside it um a class component has its own life cycle a functional component doesn't have any life cycles so that's why we can test it on its own okay okay that's good that's good um tell me more about react native um and why why do we use it what's what's your opinion why do we use it sure sure um react native is an exciting framework uh you know that enables web developers or JavaScript developers to create robust mobile applications using their existing JavaScript knowledge it offers faster mobile development and more efficient code sharing across iOS Android and web applications um this all happens without sacrificing the end users experience or application quality okay that's good that's good um so what are the difference between react native uh and app which is built or if you want to build an app on react native versus if you want to build an app on Native platform for example for iOS on Swift and for Android on Java sure so so there there benefits which is more towards the business side so for example if you develop an app using react native it exceptionally increases uh you know delivery time it it it exponentially increases uh developers experience um it increases productivity by speeding up the development and the key benefit of creating an app using react natives uh react native uh are incomplete without mentioning that the user experience and user interface ER Remains the Same across all the platforms whereas if you develop application on uh on N uh if you compare it with the native application uh you have more Superior control over code uh if an application that heavily depends on OS like uh arate uh and needs um Hardware access like camera microphone Touch ID and so forth I mean I'm not saying that you can't use some of them with react native but it's better to use native applications uh if you have extensive use of this particular um capabilities of of your device um also native environment allows full utilization of device and system capabilities so these are the key benefits and and in my opinion developing an app in react natives gives you uh you know uh more business benefits compared to Technic technological benefits you can ship the app faster the developer experience is uh you know good because you have lots of developers who already know JavaScript so they can code in react native fairly quickly and um it uh delivers the value to the end customers faster so that's that's the main difference okay okay um that's good that's good okay so let's get a little bit of Deep dive into uh into the react native Paradigm so have you you heard about flatlist would you be able to tell me more about if if you have yeah sure sure um if you need to render list of similar items from an array or or the data is very big you can use flatlist um and uh you know you can reender the data with using extra data um extra data prop uh on the flat list so so basically uh if you have list of similar items um from an API um and then you all assign it to a array variable you can easily use flatlist to list it down on your application okay okay could you tell me more about the difference between a flat list and a virtualized list sure um flat list is recommended for rendering basic flat list with simple data and layout whereas virtualization or virtual list massively improves the memory consumption and performance of large lists uh by by maintaining a finite render window of active items and replacing all item outside the render window with approximately same size of blank spaces so basically you you use virtualized list mostly to make sure that your memory consumption is lower and your performance is enhanced okay okay so can you tell us more about life cycle of a component sure sure um a components life cycle has three main phases mounting phase a updating phase and unmounting phase the mounting phase begins with a component uh is begins when the component is first created and inserted into the Dom the updating process occurs when a component state or props change and the unmounting phase occurs when a component is removed from the do right okay okay so let's let's talk about some um some react native um syntax like view safe area view scroll view you must have heard about them yeah I did I did okay what what sort of um syntax or or or elements you use in react native for for creating a button well I usually use uh touchable opacity but some people uh also use uh pressible and that that depends upon the use case uh touchable oity is more robust in my opinion um because it gives you a simple function which you can invoke on click on or on press and uh do the required or perform the required business logic um view is um the the top level syntax or element in react native which could hold uh nothing or even itself inside it uh so it's nestable safe area view um the purpose of safe area view is to render content within the safe area boundaries of a device um it is only currently um available on iOS devices with uh iOS versions 11 or later but if you want to you UTI uze the similar kind of um um utility in in Android then you can just uh put some kind of um Alternatives like create some um layout with um styles sheets and then make sure that it comes under the safe area view of the Android uh Android uh screen phone screen okay okay what about scroll view um so so scroll view is like more if you need to render generic content in a scrollable container and the data is very small you can use scroll B for example let's say menus you have 20 menus on the on a page we can use scroll view okay okay that's good that's good so let's move uh further towards uh more technical sides uh so could you so you mention about uh components and props in the components um and then then States Etc can you explain what is the difference between props and state sure sure um so Props are uh immutable you know um States can be mutated um props are used mostly for passing data and settings whereas State Stores simple view State like drop- down options Etc uh props are passed from parent to child uh states are managed by its own component on its own um props are unidirectional in flow and they're read only whereas State can be reused private and modifiable okay that's that's uh good that's good so so HH tell us more about hooks do you have I'm sure you must have used a lot of hooks uh and then uh tell us more what it is how we use it and how it improves uh a developer's um experience while developing an application sure sure um hooks were introduced into react from I think version 16 somewhere 16 or 17 um you can use react features without writing a class with hooks um hooks uh with hooks you can extract State full logic from a component this enables us to test these uh them independently and reuse it um hooks uh allows you to reuse stateful login without changing your component hierarchy this makes it easy to share hooks among many components it would go ahead and say um I would go ahead and say uh you know it makes it easy easy to even share it with your developer Community okay and um another thing I want to uh emphasize on is hooks uh do not work inside classes okay okay so have you heard about these new hooks introduced in react 18 use deferred value or use insertion effects yes I have heard about them and I have used uh a few of them so used deferred value hook let's solve the slow render issue by adding a delay before some information is calculated for example the this works similarly to debouncing and throttling and um throttling in in in that our deferred value is calculated only after the necessary State modifications have completed whereas use insertion effect hook provides a powerful and intuitive way um to handle Dom insertion operation in react application um by by executing code immediately after an element is inserted into the Dome you can perform various tasks such as Dome manipulation animation initialization and cleanup operations okay okay can you talk about uh another um hook called us ID yeah sure use ID is react for generating unique IDs that can be passed to um uh to elements uh for accessibility attributes okay okay what about use sync external store well us Sy external store is a custom hook available in react 18 it lets you subscribe to an external store reads uh updated value from that store and updates components if needed by external store I mean browser history local storage third party libraries Etc so basically use sync external store hook can be used to read data from your third party libraries and then manipulate the state of your component based on the data available okay um can you tell more about uh use callback how why it is use for sure use call back is a hook that will return a memorized version of the call back function that only changes if one of the dependencies has changed um it it returns its function when the dependencies changed while use memo call its function and Returns the result oh okay um it's not that it's nice that you mention about use memo can you tell more tell us more about it yeah sure the react used memo hook returns a memoized value think of a uh memorization as caching a value so that it does not need to be recalculated a very simple example for this is you have a function and it's me you know it is using use memo it is utilizing Ed memo so if the function is just multiplying x with 100 if you send one it will send you 100 back if you said send pass two to the function it will send you back 200 if you pass three to the function it will send you back 300 but again if you pass one it will send you back 100 but that function will not be called because it is using use memo it will just utilize its own um capability to send you back the same results because you have provided the same same input that's how we use use memo okay that's good that's good okay so in terms of hooks then I think the last one I have for you is about how do you use use imperative right right okay um reacts control flow approach approach uh is top to bottom right so top to bottom is a better for most use cases right um keeping our code predictable when it comes to forms there is a shift to using the opposite control flow of Bottoms Up or HTML to react code this is normally simple to do but sometimes it means we need to implicitly control the form from about this is a performance uh readability tradeoff and which which we can make to give users and developers a better more native experience the use imperative handle hook allows us to do effortlessly to allows us to effortlessly take charge of these edge cases so in a layman's term normal react control flow is top to bottom but sometimes is when we are um implementing forms or user inputs the approach shifts from bottom to top use imperative hook allows us to manage this um performance readability tradeoff effectively got it got it okay right that's uh that's good so would would you be able to talk more about context apis what are the context apis in react sure the react context API was introduced in react 16 I think so um and it allows us to pass data through our component trees giving our components the ability to communicate and share data at different levels um react context apis is more suitable for scenarios where State updates are infrequent or simple and centralized State Management is not critical okay and what about use context then so use context so so first we need to understand context in order to understand use context so context is a react feature for sharing State between several parent and child components with the help of a provider use contact is a hook that let you easily hook into context thereby accessing shared State using context is using context is one method of State Management which can be combined with other methods such as Redux what about use reducer okay um I need I think we need to understand real use reducer by understanding use state so use state is a simpler hook that allows you to manage a single piece of State while use reducer is more powerful and allows you to manage more complex states that may have multiple values and require more sophisticated updates if you find yourself keeping track of multiple pieces of state that rely on complex logic R reuse reducer uh may be useful okay that's nice what about us ref well USF is a hook that allows to directly create references to the Dom element in the functional component um it is a hook allow which allows you to persist values between renders and it can be used to store mutable value that does not cause a render when updated okay okay that's fine um right so I have few more question for you but it's more related to the basic JavaScript so I would like to know more about debouncing what do you what do you what do you think about it and what what does it does and you know how we use it sure Dem mouning is a programming practice um we use to ensure that time consuming tasks do not fire often uh um it stalls the performance of the web app and that's why we want to use debouncing uh practice in in simpler words debouncing is removing unwanted input noise from buttons switches or other user inputs okay so what about throttling then so throttling is a technique that limits how often a function can be called in a given period of time for example execute this function at most once every 100 milliseconds in other words by using throttle we don't allow to our function to execute more than once every X millisecond right okay um have you used EXO's U npm package and why do you want to use exos on top of what the fetch API which is available in react uh what are the benefits of it sure sure so XS is a simple package which helps you uh you know make um API request um but the benefit of using exos on top of fet is you have interceptors and deceptor in it so interceptors and deceptor allow you to modify the request or response before it is sent or received by the server and interceptors are useful because they allow developers to add custom functionality to request and response without modifying the actual code that makes the request and that's the benefit of using xus okay okay okay so I the last question I think I want to ask you is um what is promise and why do you use it sure um A promise is a JavaScript object that allows you to make a synchronous calls and it provides a value when this synchronous operation complete successfully or produced an error if it doesn't complete okay um H that's uh fair enough okay so that's good then uh I think I have finished all of my questions for now uh thank you for your time to uh you know uh for this interview and we will get back to you as soon as possible right so you've seen um how the react native interview uh has been done um or you can prepare these questions for it if you want to schedule um a mock interview for yourself uh if you're appearing for an interview or if you want to take an interview then I'm happy to help you just go on uh this website people sports.com and then just scroll down in the bottom and then just book book a call with me and then I'll be able to spend uh maybe half an hour or an hour with you to explain how things work out during the interview and then potentially help you out with your questions if you like the video give me a thumbs up and subscribe to the channel

Channel: TechMan

Views: 2,389

Keywords: yt:cc=on, React Native, React native Basics, React native Tutorial for beginners, React native tutorial, react native app, react native for beginners, React native preparation, Course, React native Interview Questions, React Native Interview Questions and Answers, React Native job Preparation, Interview Questions, Programming interview Questions, Introduction to React Native, React native for Freshers, React native Programming, Programming Question and answers, edureka

Id: LDqTrUiTQwQ

Length: 34min 13sec (2053 seconds)

Published: Thu Oct 26 2023