React Native Interview Questions And Answers 2021

Q1 What is React?

React is a front-end JavaScript library developed by Facebook in 2011.
It follows the component based approach which helps in building reusable UI components.
It is used for developing complex and interactive web and mobile UI.
Even though it was open-sourced only in 2015, it has one of the largest communities supporting it.

Q2 What are the features of React? 

Major features of React are listed below:

It uses the virtual DOM instead of the real DOM.
It uses server-side rendering.
It follows uni-directional data flow or data binding.

Q3 List some of the major advantages of React.

Some of the major advantages of React are:

It increases the application’s performance
It can be conveniently used on the client as well as server side
Because of JSX, code’s readability increases
React is easy to integrate with other frameworks like Meteor, Angular, etc
Using React, writing UI test cases become extremely easy

Q4 What are the limitations of React?

Limitations of React are listed below:

React is just a library, not a full-blown framework

Its library is very large and takes time to understand

It can be little difficult for the novice programmers to understand

Coding gets complex as it uses inline templating and JSX

Q5 What are Higher Order Components(HOC)?

Higher Order Component is an advanced way of reusing the component logic. Basically, it’s a pattern that is derived from React’s compositional nature. HOC are custom components which wrap another component within it. They can accept any dynamically provided child component but they won’t modify or copy any behavior from their input components. You can say that HOC are ‘pure’ components.

Q6 What can you do with HOC?

HOC can be used for many tasks like:

Code reuse, logic and bootstrap abstraction
Render High jacking

State abstraction and manipulation
Props manipulation

Q7 What are Pure Components?

Pure components are the simplest and fastest components which can be written. They can replace any component which only has a render(). These components enhance the simplicity of the code and performance of the application.

Q8 What is the significance of keys in React?

Keys are used for identifying unique Virtual DOM Elements with their corresponding data driving the UI. They help React to optimize the rendering by recycling all the existing elements in the DOM. These keys must be a unique number or string, using which React just reorders the elements instead of re-rendering them. This leads to increase in application’s performance.

Q9. What were the major problems with MVC framework?

Following are some of the major problems with MVC framework:

DOM manipulation was very expensive
Applications were slow and inefficient
There was huge memory wastage
Because of circular dependencies, a complicated model was created around models and views

Q10 Explain Flux.

Flux is an architectural pattern which enforces the uni-directional data flow. It controls derived data and enables communication between multiple components using a central Store which has authority for all data. Any update in data throughout the application must occur here only. Flux provides stability to the application and reduces run-time errors

Q11 What is Redux?

Redux is one of the hottest libraries for front-end development in today’s marketplace. It is a predictable state container for JavaScript applications and is used for the entire applications state management. Applications developed with Redux are easy to test and can run in different environments showing consistent behavior.

Q12 What are the three principles that Redux follows?

Single source of truth: The state of the entire application is stored in an object/ state tree within a single store. The single state tree makes it easier to keep track of changes over time and debug or inspect the application.

State is read-only: The only way to change the state is to trigger an action. An action is a plain JS object describing the change. Just like state is the minimal representation of data, the action is the minimal representation of the change to that data.

Changes are made with pure functions: In order to specify how the state tree is transformed by actions, you need pure functions. Pure functions are those whose return value depends solely on the values of their arguments.

Q13 Explain the role of Reducer.

Reducers are pure functions which specify how the application’s state changes in response to an ACTION. Reducers work by taking in the previous state and action, and then it returns a new state. It determines what sort of update needs to be done based on the type of the action, and then returns new values. It returns the previous state as it is, if no work needs to be done.

Q14 What is the significance of Store in Redux?

A store is a JavaScript object which can hold the application’s state and provide a few helper methods to access the state, dispatch actions and register listeners. The entire state/ object tree of an application is saved in a single store. As a result of this, Redux is very simple and predictable. We can pass middleware to the store to handle the processing of data as well as to keep a log of various actions that change the state of stores. All the actions return a new state via reducers.

Q15 What are the advantages of Redux?

Advantages of Redux are listed below:

Predictability of outcome – Since there is always one source of truth, i.e. the store, there is no confusion about how to sync the current state with actions and other parts of the application.
Maintainability – The code becomes easier to maintain with a predictable outcome and strict structure.
Server-side rendering – You just need to pass the store created on the server, to the client side. This is very useful for initial render and provides a better user experience as it optimizes the application performance.
Developer tools – From actions to state changes, developers can track everything going on in the application in real time.
Community and ecosystem – Redux has a huge community behind it which makes it even more captivating to use. A large community of talented individuals contribute to the betterment of the library and develop various applications with it.

Ease of testing – Redux’s code is mostly functions which are small, pure and isolated. This makes the code testable and independent.
Organization – Redux is precise about how code should be organized, this makes the code more consistent and easier when a team works with it.

Q16 What is React Router?

React Router is a powerful routing library built on top of React, which helps in adding new screens and flows to the application. This keeps the URL in sync with data that’s being displayed on the web page. It maintains a standardized structure and behavior and is used for developing single page web applications. React Router has a simple API.4

Q17 Why is switch keyword used in React Router v4?

Although a <div> is used to encapsulate multiple routes inside the Router. The ‘switch’ keyword is used when you want to display only a single route to be rendered amongst the several defined routes. The <switch> tag when in use matches the typed URL with the defined routes in sequential order. When the first match is found, it renders the specified route. Thereby bypassing the remaining routes.

Q18 Why do we need a Router in React?

A Router is used to define multiple routes and when a user types a specific URL, if this URL matches the path of any ‘route’ defined inside the router, then the user is redirected to that particular route. So basically, we need to add a Router library to our app that allows creating multiple routes with each leading to us a unique view.

Q19 In Which Lifecycle Event Do You Make Ajax Requests And Why?

AJAX requests should go in the componentDidMount lifecycle event.

There are a few reasons for this,

Fiber, the next implementation of React’s reconciliation algorithm, will have the ability to start and stop rendering as needed for performance benefits. One of the trade-offs of this is that componentWillMount, the other lifecycle event where it might make sense to make an AJAX request, will be “non-deterministic”. What this means is that React may start calling componentWillMount at various times whenever it feels like it needs to. This would obviously be a bad formula for AJAX requests.
You can’t guarantee the AJAX request won’t resolve before the component mounts. If it did, that would mean that you’d be trying to setState on an unmounted component, which not only won’t work, but React will yell at you for. Doing AJAX in componentDidMount will guarantee that there’s a component to update.

Q20 What Does Should component update Do And Why Is It Important?

Above we talked about reconciliation and what React does when setState is called. What shouldComponentUpdate does is it’s a lifecycle method that allows us to opt out of this reconciliation process for certain components (and their child components). Why would we ever want to do this? As mentioned above, “The end goal of reconciliation is to, in the most efficient way possible, update the UI based on new state”. If we know that a certain section of our UI isn’t going to change, there’s no reason to have React go through the trouble of trying to figure out if it should. By returning false from shouldComponentUpdate, React will assume that the current component, and all its child components, will stay the same as they currently are.

Q21 . How Do You Tell React To Build In Production Mode And What Will That Do?

Typically you’d use Webpack’s DefinePlugin method to set NODE_ENV to production. This will strip out things like propType validation and extra warnings. On top of that, it’s also a good idea to minify your code because React uses Uglify’s dead-code elimination to strip out development only code and comments, which will drastically reduce the size of your bundle.

Q22 Describe How Events Are Handled In React?

In order to solve cross browser compatibility issues, your event handlers in React will be passed instances of SyntheticEvent, which is React’s cross-browser wrapper around the browser’s native event. These synthetic events have the same interface as native events you’re used to, except they work identically across all browsers.

What’s mildly interesting is that React doesn’t actually attach events to the child nodes themselves. React will listen to all events at the top level using a single event listener. This is good for performance and it also means that React doesn’t need to worry about keeping track of event listeners when updating the DOM.

Q23 What Is The Difference Between Createelement And Cloneelement?

createElement is what JSX gets transpiled to and is what React uses to create React Elements (object representations of some UI). cloneElement is used in order to clone an element and pass it new props.

Q24 What Is The Second Argument That Can Optionally Be Passed To Setstate And What Is Its Purpose?

A callback function which will be invoked when setState has finished and the component is re-rendered.

Something that’s not spoken of a lot is that setState is asynchronous, which is why it takes in a second callback function. Typically it’s best to use another lifecycle method rather than relying on this callback function, but it’s good to know it exists.

this.setState(
  { username: ‘tylermcginnis33’ },
  () => console.log(‘setState has finished and the component has re-rendered.’)
)

Q25 What Is Wrong With This Code?

  return {
    streak: prevState.streak + props.count
  }
})

Nothing is wrong with it . It’s rarely used and not well known, but you can also pass a function to setState that receives the previous state and props and returns a new state, just as we’re doing above. And not only is nothing wrong with it, but it’s also actively recommended if you’re setting state based on previous state.

Q26 Is React Native Like Other Hybrid Apps Which Are Actually Slower Than Native Mobile Apps?

React Native compiles a real mobile and is engineered for high performance, a good example of a high performance app is Facebook IOS app; it uses React Native and IOS users have a pretty good idea of how smoothly the Facebook app works on IOS devices.

Q27 Do We Use The Same Code Base For Android And Ios?

Yes, we use the same code base for Android and IOS and React take cares of the native components translations. For example: A React Native ScrollView uses native UiScrollView on IOS and ScrollView on Android.

Q28 Can We Use React Native Code Alongside With React Native?

Yes, we can use Native code alongside JavaScript to get our tasks done, so the limitations in previous such platforms such as Titanium will be no more.

Q29 Is React Native A Native Mobile App?

Yes, React Native Compiles a native mobile app using native app components. It’s neither a Hybrid Mobile app that uses WebView to run the HTML5 app or a mobile web app. React Native builds a real mobile app that’s indistinguishable from an app built using Objective-C or Java.

Q30 What Is The Difference Between React And React Native?

ReactJs is a JavaScript Library used for developing apps in HTML5 using JavaScript as the developing language and React Native is used to develop native mobile apps using JavaScript as the development language.

Q31 What are the advantages of React Native?

React Native is based on “Learn Once Write Everywhere” approach to equip developers with a tool that only needs to be learned once, just in a single language and then can be reused on both iOS and Android mobile platform.
React Native offers cross-platform development and a real experience to developers allowing them to build only one app with effectively 70% code sharing between different platforms.
React Native helps in faster development. Building one app instead of two using a common language gives speedier app deployment, delivery, and quicker time-to-market.
React Native exists with essential components for ending of native apps as the app development ends with native look and feel.
React Native has a large community of developers for its security. The developers are always ready to fix bugs and issues that occur at any instant. They improve the performance of React Native from time to time with the best practices possible.

React Native supports Live and Hot Reloading. Both are different features. Live Reloading is a tool that helps in compiling and reading the modified files. Hot Reloading is based on HMR (Hot Module Replacement) and helps to display the updated UI content.

Q32 List the essential components of React Native.

These are the following essential components of React Native:

View is the basic built-in component used to build UI.

Text component displays text in the app.
Image component displays images in the app.
TextInput is used to input text into the app via the keypad.
ScrollView is a scrolling container used to host multiple views.

Q33 What are the cons of React Native?

React Native is still a new development platform as compared to iOS and Android platforms. It is still immature, i.e., in an improvement stage and impacting negatively on apps.
Sometimes, React Native built-in apps face performance problem if there is a requirement of advanced functionality. In that case, they don’t perform well as compared to native apps.
React Native has a steep learning curve for an average learner as it is not more comfortable in comparison to other cross-platform apps. It is because of existing JSX (JavaScript Syntax extension) in which HTML and JavaScript get combined and make learning challenging for average ones.
React Native is based on JavaScript library which is fragile and creates a gap in the security robustness. As an expert’s point of view, React Native is not secure and robust for building highly confidential data apps like Banking and Financial apps.

Q34 How many threads run in React Native?

There are two threads run in React Native:

JavaScript thread

Main UI thread

Q35 What are props in React Native?

props pronounced as the properties of React Native Components. props are the immutable parameters passed in Presentational Component to provide data.

Q36 What are React Native Apps?

React Native Apps are not web apps; they are the real and native mobile applications built-in a single language with the native components to run on mobile devices.

Q37 List the users of React Native?

There are thousands of React Native built-in apps. Here is the list of those apps:

Facebook

Facebook Ads Manager
Instagram
F8
Airbnb
Skype

Tesla
Bloomberg
Gyroscope
Myntra
UberEats

Q38 For what purpose XHR module used in React Native?

XHR module implements XMLHttpRequest to post data on the server.

Q39 Can we use Native code alongside React Native?

Yes, we can use a native code alongside React Native for task completion, and several limitations can also overcome in previous versions like Titanium.

Q40 Are React Native built-in mobile apps like other Hybrid Apps which are slower in actual than Native ones?

React Native designed as a highly-optimized performance-based framework that builds real mobile apps with native components. Facebook is the best-suited example of high performance based app built-in React Native.

Q41 What is the difference between React and React Native?

React is a JavaScript library while React native is a framework based on React.
js used for building UI and web applications while React Native is used for creating cross-platform native mobile apps.
Both uses synonymous tags such as <div> <h1> <h2> are the tags in React.js and <View> <Text> are the tags in React native.
js uses DOM for path rendering of HTML tags while React Native uses AppRegistry for app registration.

Q42 What is the difference between React Native and Native Script?

React Native uses only a single core development language- JavaScript while Native Script can use any of these languages- Angular, Vuejs, TypeScript, and JavaScript.
React Native has faster development speed than Native Script. React Native exists with reusable components that developed at once can be used at different mobile platforms and accelerates mobile app development while Native Script exists with a less number of plugins among which some pass improper verification.
React Native performs high as compared to Native Script. React Native is React based and uses virtual Dom for faster UI updation while Native Script uses slower Angular, Vuejs, and TypeScript.

Native Script exists with a box of various themes that shorten the gap between the different platform UIs while React Native doesn’t live with predefined themes; you get default look and feel by the devices.

Q43 Can we combine native codes of Android and iOS in React Native?

Yes, we can do this as React Native fluently combines the components of both iOS and Android written in Swift/ Objective-C or Java.

Q44 What is the point of StyleSheet.create() in react native?

In React Native, StyleSheet.create() send the style only once through the bridge to avoid passing new style object and ensures that values are immutable and opaque.

Q45 Why React Native has very clear animations?

The animated API of React Native was designed as serializable so that users can send animations to native without going through the bridge on every frame. Once the animation starts, a JS thread can be blocked, and the animations will still run fluently. As the code converted into native views before rendering, the animations in React native will run smoothly, and the users get bright animations.

Q46 Differentiate between the React component and the React element.

React component is a class or function that accepts input and returns a React element while React element displays the look of React Component Instance to be created.

Q47 Why React Native use Redux?

Redux is a standalone state management library that React Native use to simplify data flow within an app.

Q48 Which node_modules will run in React Native? How to test for this?

In React Native, node_modules as any pure JavaScript library that does not rely on Node.js run-time modules, and does not rely on web-specific concepts like window.location.pathname

will run fine. But be conscious as there exists no way to test for this with Babel- it doesn’t scan these libraries for offending dependencies. A module that uses window.location.pathname may fail at run-time in a different unexpected place.

Q49 What is Virtual DOM and how it works in React Native?

Virtual Dom is an in-memory tree representation of the real DOM with lightweight elements. It provides a declarative way of DOM representation for an app and allows to update UI whenever the state changes.

Working

Virtual DOM lists elements and their attributes and content. It renders the entire UI whenever any underlying data changes in React Native. Due to which React differentiates it with the previous DOM and a real DOM gets updated.

Q50 What is Interaction Manager and what is its importance?

Interaction Manager is a native module in React native that defers the execution of a function until an “interaction” finished.

Importance React Native has JavaScript UI thread as the only thread for making UI updates that can be overloaded and drop frames. In that case, Interaction Manager helps by ensuring that the function is only executed after the animations occurred.