For Course Enquiry -

+91 9985396677

Top 50 React JS Questions & Answers

1) What is Reactjs?
Answer:

React is a JavaScript library that makes building user interfaces easy. It was developed by Facebook.


2) What is Flux Concept In React?
Answer:

Facebook widely uses flux architecture concept for developing client-side web applications. It is not a framework or a library. It is simply a new kind of architecture that complements React and the concept of Unidirectional Data Flow.

3) What is Props?
Answer:

Props is the shorthand for Properties in React. They are read-only components which must be kept pure i.e. immutable. They are always passed down from the parent to the child components throughout the application. A child component can never send a prop back to the parent component. This help in maintaining the unidirectional data flow and are generally used to render the dynamically generated data.

4) What is a state in React and how is it used?
Answer:

States are the heart of React components. States are the source of data and must be kept as simple as possible. Basically, states are the objects which determine components rendering and behavior. They are mutable unlike the props and create dynamic and interactive components. They are accessed via this. State().

5) What is an event in React?
Answer:

In React, events are the triggered reactions to specific actions like mouse hover, mouse click, key press, etc. Handling these events are similar to handling events in DOM elements. But there are some syntactical differences like:

Events are named using camel case instead of just using the lowercase.

Events are passed as functions instead of strings.

The event argument contains a set of properties, which are specific to an event. Each event type contains its own properties and behavior which can be accessed via its event handler only.

6) Why is there a need for using keys in Lists?
Answer:

Keys are very important in lists for the following reasons:

A key is a unique identifier and it is used to identify which items have changed, been updated or deleted from the lists

It also helps to determine which components need to be re-rendered instead of re-rendering all the components every time. Therefore, it increases performance, as only the updated components are re-rendered.

7) What is a state in React?
Answer:

The state is a built-in React object that is used to contain data or information about the component. The state in a component can change over time, and whenever it changes, the component re-renders.

 The change in state can happen as a response to user action or system-generated events. It determines the behavior of the component and how it will render.

8) What are the biggest limitations of React?
Answer:

Following is the list of the biggest limitations of React:

React is just a library. It is not a complete framework.
It has a huge library which takes time to understand.
It may be difficult for the new programmers to understand and code.
React uses inline templating and JSX, which may be difficult and act as a barrier. It also makes the coding complex.

9) Why can't browsers read JSX?
Answer:

Browsers cannot read JSX directly because they can only understand JavaScript objects, and JSX is not a regular JavaScript object. Thus, we need to transform the JSX file into a JavaScript object using transpilers like Babel and then pass it to the browser.

10) Why we use JSX?
Answer:

.It is faster than regular JavaScript because it performs optimization while translating the code to JavaScript.

Instead of separating technologies by putting markup and logic in separate files, React uses components that contain both.

t is type-safe, and most of the errors can be found at compilation time.

It makes easier to create templates.

11) What is ReactDOM, and what is the Difference Between ReactDOM and React?
Answer:

Earlier ReactDOM was part of React but later React and ReactDOM were split into two different libraries. Basically, ReactDOM works like glue between React and the DOM. We can use it for one single thing: mounting with ReactDOM. 

ReactDOM.findDOMNode() which is another useful feature of ReactDOM can be used to access the DOM element. For the rest of the things React is there. 

12) What are props?
Answer:

As Per React's Thinking in React documentation, props are best explained as "a way of passing data from parent to child." That's it. In essence, 

13) What are Pure Components?
Answer:

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.

14) What were the major problems with MVC framework?
Answer:

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, complicated model was created around models and views

15) Explain the role of Reducer.
Answer:

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.

16) How ReactJs framework is different as compared to others?
Answer:

ReactJs is an incomplete library that builds UI parts; it is fundamentally not fairly the same as a considerable calculate of other JavaScript structures. One ordinary example is AngularJS approaches building an app just by expanding HTML markup and infusing dissimilar develop such as controller at runtime.

17) What are the lifecycles of ReactJs?
Answer:

The lifecycles of ReactJs are:

Destruction

Initialization

Property Updates

18) When ReactJs released?
Answer:

March 2013

19) What is closure, and what is it used for?
Answer:

Closure is a mechanism, which connects a function and a reference to its outer scope. Created at the moment of function creation, a closure provides access to the outer scope from the function’s inner scope. A closure controls what is and what is not in the scope of a certain function. It can be used in event handlers, callbacks, currying, and other functional programming patterns. Most importantly, closures are often used for object data privacy.

20) What is the use of refs?
Answer:

The ref is used to return a reference to the element. They should be avoided in most cases, however, they can be useful when we need direct access to DOM element or an instance of a component.

21) What is JEST?
Answer:

Jest is a JavaScript unit testing framework made by Facebook based on Jasmine and provides automated mock creation and a jsdom environment. It's often used for testing React components.

22) What are the advantages of ReactJS?
Answer:

Below are the advantages of ReactJS:

Increases the application’s performance with Virtual DOM

JSX makes code is easy to read and write

It renders both on client and server side

Easy to integrate with other frameworks (Angular, BackboneJS) since it is only a view library

Easy to write UI Test cases and integration with tools such as JEST.

23) What Is React Native?
Answer:

React Native is the next generation of React - a Javascript code library developed by Facebook and Instagram, which was released on Github in 2013. Native app creation means writing apps for a specific operating system.

React Native helps developers reuse code across the web and on mobile. Engineers won't have to build the same app for iOS and for Android from scratch - reusing the code across each operating system.

Android and iOS have very different codebases and startups and businesses often struggle to hire - or afford- engineers for both. Now just one developer can write across different mobile operating systems.

24) How Did Facebook Write React Native For Android?
Answer:

The first cross-platform React Native app - ads manager - was developed by the London-based dev team, who were in the US to announce the Android release yesterday evening. Ads manager lets businesses that advertise on the social network manage their accounts and create new adverts.

React Native has only recently been proven in production and building a new app based on the framework carried some risk.

Three product engineers familiar with React set about to create an app for Android and predicted problems with the logic necessary to understand differing time zones, date formats, currencies and ad formats across the world.

This business logic was already written in JavaScript, and the team knew it wouldn't be efficient to build it all again in Objective-C to do it again in Java for Android.

Now this project has been released on Github, developers can use a single workflow to develop for iOS and Android. This means you can use the same editor and propagate it to both the iOS simulator and Android emulator at the same time.

25) Why would you choose the React Native framework over another application framework?
Answer:

Although, there are a variety of other application development frameworks available like ionic and Cordova, React native is distinct and has got certain advantages which are listed below-

React native is the framework to create real mobile applications, not web applications running on a mobile app platform. 

It is better in performance as React native applications are translated in machine code and run on mobile. 

It is not a hybrid app development framework, and it is more of a native application development framework. 

The application has a small bundle size. 

26) Is React native framework robust and trustworthy? Are there any big companies utilizing this framework?
Answer:

React native is a robust way to develop robust applications for both ios and android. It has a large developer base, and even big companies use it to build their apps. Some examples are as follows:

Instagram is an application built on react Native, and as we know, it is capable of handling extensive interactions and processing. 

Other companies and organizations also rely upon react native for their application like Pinterest, Uber, Tesla, and Airbnb. 

27) What does it mean to mount a component in React?
Answer:

It is linked to a matching element generated in the DOM.

28) What makes React unique?
Answer:

Because React is a small library focused on creating UI components, it is unavoidably distinct from many other JavaScript frameworks.

React focuses only on the development of components and has few (if any) views on the architecture of an application. This gives a developer tremendous freedom in selecting the architecture they consider “optimal,” but it also places the burden of choosing (or creating) those components entirely on the developer’s shoulders.


29) What is the definition of a Higher-Order Component?
Answer:

Higher-order components are essentially functions that accept a component and return a new component. HOCs enable you to reuse code, logic, and bootstrap abstraction. HOCs are popular in third-party React librarie

30) What is the difference between createElement and cloneElement?
Answer:

JSX elements will be transpiled to React.createElement() functions to create React elements which are going to be used for the object representation of UI. Whereas cloneElement is used to clone an element and pass it new props.

31) What are the major features of React?
Answer:

The major features of React are:

- It uses VirtualDOM instead RealDOM considering that RealDOM manipulations are expensive.

- Supports server-side rendering.

- Follows Unidirectional* data flow or data binding.

- Uses reusable/composable UI components to develop the view.

32) List some of the major advantages of React.
Answer:

It increases the application’s performance.

It is a lightweight library.

It can be easily used on both client and server-side rendering.

JSX provides effective code readability.

It can be integrated with other frameworks like Meteor, etc.

Using React, writing UI test cases is extremely easy.

It simply focuses on the view layer of the application without being a heavy and bloated framework.

33) Why can’t browsers read JSX?
Answer:

Browsers can only read JavaScript objects but JSX is not a regular JavaScript object. Thus to enable a browser to read JSX, we first need to transform JSX file into a JavaScript object using JSX transformers like Babel and then pass it to the browser.

34) What is an event in React?
Answer:

In React, events are the triggered reactions to specific actions like mouse hover, mouse click, key press, etc. Handling these events is anologous to handling events in DOM elements.

35) Why Reactjs Is used?
Answer:

Reactjs is used to handle only the View part and not for others web apps as well as mobile apps.

36) Does Reactjs use HTML?
Answer:

No!, Reactjs uses JSX (JavaScript XML) which is very similar to HTML.

37) What Is the life Cycle of Reactjs components?
Answer:

1.      Initialization /Initial Rendering Phase

2.      State/Property Updates

3.      Destruction

38) What is current stable version of ReactJS?
Answer:

Version: 16.2.0

Release on: November 28, 2017

39) How to install React?
Answer:

For Installing of React follow below steps:

STEP 1: Installing NPM

 Begin the installation of ReactJS by installing NPM (Node Package Manager) .

 To install NPM on Ubuntu Linux

$ sudo apt install npm

The installation is complete, you can verify the version of NPM installed using the command:

$ npm –version

The latest version at the time of writing this is v7.6.3 as captured in the output.

Installation of NPM also install Node.JS and check his version

$ node –version

 The latest version at the time of writing this is v12.22.1 as captured in the output.

 STEP 2: Installing create-react-app utility

Install the react  tool

$ sudo npm -g create-react-app

where: -g (Globally install)

Once install the tool then check his version

$ create-react-app –version

STEP 3: Create first React App

$ npx create-react-app app_name

Created a React app 

$ cd app_name

Start the application 

$ npm start

40) What is the difference between functional and class component?
Answer:

Functional Components              Class Components

These are pure JavaScript functions that accept props object as parameter and returns React elements. A class component is a more identified way of defining a React component.  

rendor() method is not used. rendor() method is used.

Also known as stateless components as they simply accept data and display them in the same form. Also known as stateful components as they implement state and logic.

React lifecycle methods cannot be used. React lifecycle methods can be used.


41) What is props in React?
Answer:

Props are passed as input to components. They are either single values or objects holding a group of values that are passed to components. The data is passed down from a parent component to a child component.

42) What is the Virtual DOM? How Virtual DOM works?
Answer:

A virtual DOM is a basic JavaScript object which is simply the copy of the real DOM. It is a tree that consists of the elements, attributes and content as objects and their properties. React render function then creates a node tree out of the React components. It then updates this tree in response to the mutations within the data model.

The Virtual DOM works in 3 steps as mentioned below – 

Whenever any data changes, the whole UI is re-rendered in Virtual DOM representation.

Then the difference between the earlier DOM representation and the new one is determined.

Once it is determined, the real DOM will be updated with only the things that have changed. 

43) What is the purpose of render() in React?
Answer:

Each React component should have a render(). It returns a single React element which is the representation of the native DOM component. If more than one HTML element needs to be rendered, then they must be grouped together inside one enclosing tag such as <form>, ,

etc. This function must be kept pure that is, it must return an equivalent result each time it is invoked.

44) How does rendering work in React?
Answer:

Rendering is an important aspect of React as every single component must be rendered. This is done using the render() function. Once the function is called, it returns an element that represents a DOM component.

It is also possible to render more than one HTML element at a time by enclosing the HTML tags and passing them through the render function.

45) What are states in React?
Answer:

States form to be one of the vital aspects of React. It is considered as a source of data or objects that control aspects such as component behavior and rendering. In React, states are used to easily create dynamic and interactive components.

46) What is a higher-order component in React?
Answer:

Higher-order components (HOCs) are a widely used technique in React for applying concepts that involve the component reusability logic. They are not a native part of the React API and allow users to easily reuse the code and bootstrap abstraction.

HOCs are also used to allow simple sharing of behaviors across all of the components in React, adding more advances to the efficiency and functioning of the application.

47) What is the difference between React Native and React?
Answer:

This is another one of the common React interview questions. It all starts with the fact that React is a JavaScript library and it supports both front-end web and being run on the server and it is commonly used for building user interfaces and web applications.  React Native, however, is a mobile framework that compiles to native app components. It allows us to build native mobile applications for Windows, Android, and iOS in JavaScript while we can use ReactJS to build our components.  With React Native, we can mimic the behavior of the native app in JavaScript and get a platform-specific code as the output. It is also possible to mix the native code with the JavaScript if we need to optimize our application further.

48) What do you understand by “Single source of truth”?
Answer:

We have mentioned the single source of truth many time earlier in this article but would you know how to explain what it actually means? Well, you should because this is one of the React interview questions that are pretty basic.  The single source of truth refers to the store used for storing the app’s entire state at one place. The benefits of the single source of truth include the facts that all the components stored there receive updates from the store itself, it is easier to keep track of their changes, as well as debug and inspect the application.

49) What is React Router
Answer:

React Router is a powerful routing library built on top of React. It is highly useful for adding new screens and flows to the application while keeping the URL in sync with data displayed on the web page. The React Router has a simple AP and it maintains a standardized behavior and structure for developing single page web apps.

50) What does it mean for a component to be mounted in React?
Answer:

It has a corresponding element created in the DOM and is connected to that.