React Interview Questions for experienced
100+ react interview questions for experienced & Freshers.
React interview questions for experienced
1. What is React?
React is a front-end JavaScript library that mainly follows the component-based approach for building user interface (UI) components for a single-page application. It is also used for handling the view layer in both mobile and web apps.
Moreover, react plays a crucial role in developing interactive mobile and web UIs. It was created and developed by Jordan Walke; it was deployed first on the Facebook newsfeed in 2011.
2. Why is Reactṣ used?
The following reasons make one use React for building User Interfaces (UI), and they are:
- Easy to learn nature
- Simplicity
- High scalability
- Increase performance
3. How does React work?
Below is the sequence of steps which gives an idea about how does react work
- Firstly the react runs the diffing algorithm to identify the changes that are made in the virtual DOM.
- The next step is reconciliation, this is used to update the DOM as per the new features.
- Now, the virtual DOM, which is lightweight in nature and is detached from the specific implementation of the browser.
- Followingly the ReactElements which are present in virtual DOM are used to build basic nodes.
- Finally, if the ReactComponent changes the state; the diffing algorithm runs faster and identifies the changes. After identification, it automatically updates the DOM with the change difference.
4. What are the features of ReactJS?
The features of React JS are as follows:
React improves SEO performance
React boosts the performance of the SEO to higher levels as a search engine faces the problem while reading JavaScript of high-loaded applications.
React acts as a standard for mobile app development
It provides a transition process as an ideal solution for both mobile and web applications for building rich user interfaces.
React makes the process of writing components easier
Using React along with JSX will make you write components and code efficiently and clearly.
React increases efficiency
React boosts the efficiency of components by reusing them. This is the reason why it is considered an ideal feature of React. It is considered the most reusable system component.
React ensures stable code
It ensures the stability of the code of an application by making use of downward data flow.
5. What are some of the important features of React?
React has multiple features that are used for unique purposes. The important ones are as mentioned below:
- React makes use of a single-direction data flow model.
- It deals with complete server-side data processing and handling.
- React uses Virtual DOM that has many advantages of its own.
Learn React Js From Our Expert Trainer
6. What is the meaning of JSX?
JSX is the abbreviation of JavaScript XML. It is a file that is used in React to bring out the essence of JavaScript to React and use it for its advantages.
It even includes bringing out HTML and the easy syntax of JavaScript. This ensures that the resulting HTML file will have high readability, thereby relatively increasing the performance of the application.
Consider the following example of a JSX:
render(){
return(
<div>
<h1> Hello Intellipaat learners!</h1>
</div>
);
}
7. Can browsers read a JSX file?
No, browsers cannot read JSX files directly. It can only read the objects provided by JavaScript. Now, to make a browser read a JSX file, it has to be transformed to a JavaScript object using JSX transformers, and only then it can be fed into the browser for further use in the pipeline.
8. Why is React widely used today?
React provides users with an ample number of advantages when building an application. Some of them are as follows:
- With React, UI testing becomes very easy.
- React can integrate with Angular and other frameworks easily.
- The high readability index ensures easy understanding.
- React can be used for both client-side and server-side requirements.
- It boosts application performance and overall efficiency.
9.. What is the virtual DOM?
DOM stands for Document Object Model. The DOM represents an HTML document with a logical tree structure. Each branch of the tree ends in a node, and each node contains objects.
React keeps a lightweight representation of the real DOM in the memory, and that is known as the virtual DOM. When the state of an object changes, the virtual DOM changes only that object in the real DOM, rather than updating all the objects.
The following are some of the most frequently asked react interview questions.
10. Are there any disadvantages to using React?
There are some limitations when using React as mentioned below:
- Writing code is complicated as it uses JSX and inline template formatting.
- Beginners might find it tough to cope with its syntaxes and methods.
- The library contains a huge repository of information, which might be overwhelming.
- React is a simple library and not a complete framework hence calls for dependencies.
Want to download these React Js Interview Questions and Answers in the form of a readable and printable PDF for your interview preparation?
Click the download button below for the PDF version
Learn React Js From Our Expert Trainer
11. How is the React JS framework different as compared to others?
ReactJS is a limited library that builds UI parts, it is essentially not quite the same as a considerable measure of other JavaScript structures.
One common example is AngularJS approaches building an app simply by expanding HTML markup and infusing different developments such as controllers at runtime.
Therefore, AngularJS is exceptionally obstinate about the more noteworthy engineering of your application.
12. What are the life Cycles of ReactJS?
- Initialization
- State/Property Updates
- Destruction
13. What is the use of refs?
Entry Refs provide a way to access DOM nodes or React elements created in the render method. They should be avoided in most cases, however, they can be useful when we need direct access to the DOM element or an instance of a component.
There are a few good use cases for refs:
- Managing focus, text selection, or media playback.
- Triggering imperative animations.
- Integrating with third-party DOM libraries.
Refs are created using React.createRef() and attached to React elements via the ref attribute. Refs are commonly assigned to an instance property when a component is constructed so they can be referenced throughout the component.
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef(); }
render() {
return <div ref={this.myRef} />; }
}
14. What are props in React?
Props are inputs to a React component. They are single values or objects containing a set of values that are passed to React Components on creation using a naming convention similar to HTML-tag attributes. i.e, They are data passed down from a parent component to a child component.
The primary purpose of props in React is to provide the following component functionality:
- Pass custom data to your React component.
- Trigger state changes.
- Use via this.props.reactProp inside component render() method.
For example, let us create an element with reactProp property,
<Element reactProp = “1” />
This reactProp (or whatever you came up with) the name then becomes a property attached to React’s native props object which originally already exists on all components created using React library.
props.reactProp;
15.. What are React Hooks?
Hooks are a new addition to React 16.8. They let you use state and other React features without writing a class.
With Hooks, you can extract stateful logic from a component so it can be tested independently and reused.
Hooks allow you to reuse stateful logic without changing your component hierarchy. This makes it easy to share Hooks among many components or with the community.
Learn React Js From Our Expert Trainer
16. What are the major features of ReactJS?
The major features of ReactJS are as follows,
- It uses VirtualDOM instead of RealDOM considering that RealDOM manipulations are expensive.
- Supports server-side rendering
- Follows Unidirectional data flow or data binding
17. What is the meaning of the component-based architecture of React?
In React, components are foundations used to build user interfaces for applications. With the component-based system in place, all of the individual entities become completely reusable and independent of each other.
This means that rendering the application is easy and not dependent on the other components of the UI.
18. How does rendering work in React?
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.
19. What are states in React?
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.
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.
20. How is React JS different from Angular JS?
The first difference between both them is their code dependency. ReactJS depends less on the code whereas AngularJS needs a lot of coding to be done. The packaging on React is quite strong compared to AngularJS.
Another difference is React is equipped with Virtual Dom while Angular has a Regular DOM. ReactJS is all about the components whereas AngularJS focus mainly on the Models, Views as well as on Controllers.
AngularJS was developed by Google while ReactJS is the outcome of Facebook. These are some of the common differences between the two.
Want to download these React Js Interview Questions and Answers in the form of a readable and printable PDF for your interview preparation?
Click the download button below for the PDF version
Learn React Js From Our Expert Trainer
21. What is Redux?
It is one of the most in-demand libraries for front-end development in today’s growing world. It is defined as the predictable state container mainly designed for JavaScript apps and also it is used for managing the entire state of an application.
Redux is very small in size and has no dependencies. It builds applications that are easy to deploy in different environments and easy to test. Redux is very small in size and has no dependencies.
22. What is the Use of Redux thunk?
Redux thunk acts as middleware which allows an individual to write action creators that return functions instead of actions. This is also used as a delay function to delay the dispatch of action if a certain condition is met.
The two store methods getState() and dispatch() are provided as parameters to the inner function.
To activate Redux thunk, we must first use the applyMiddleware() method as shown below:
import{ create store, applyMiddleware } from ‘redux’;
import thunk from ‘redux-thunk’;
import root reducer from ‘./reducers/index’;
//Note: this API requires redux@>=3.1.0
const store= createStore(
rootReducer,
23. What do you know about Flux?
Flux is a basic illustration that helps maintain the unidirectional data stream. It is meant to control constructed data’s unique fragments to make them interface with that data without creating issues.
Flux configuration is insipid; it’s not specific to React applications, nor is it required to collect a React application. Flux is basically a straightforward idea, however, you have to exhibit a profound comprehension of its usage.
24. What is the current stable version of ReactJS?
******Version: 16.12.0
******Release on: Nov 14, 2019
25. What is the use of an arrow function in React?
An arrow function is used to write an expression in React. It allows users to manually bind components easily. The functionality of arrow functions can be very useful when you are working with higher-order functions particularly.
Consider the following example:
//The usual way
render() {
return(
<MyInput onChange={this.handleChange.bind(this) } />
);
}
//Making use of the arrow function
render() {
return(
<MyInput onChange={ (e) => this.handleOnChange(e) } />
);
}
Learn React Js From Our Expert Trainer
26. What is the difference between the ES6 and ES5 standards?
This is one of the most frequently asked react interview questions.
These are the few instances where ES6 syntax has changed from ES5 syntax:
- Components and Function
- exports vs export
- require vs import
27. How do you create a React app?
These are the steps for creating a React app:
- Install NodeJS on the computer because we need npm to install the React library. Npm is the node package manager that contains many JavaScript libraries, including React.
- Install the create-react-app package using the command prompt or terminal.
- Install a text editor of your choice, like VS Code or Sublime Text.
We have put together a set of Node.js interview questions in case you would like to explore them.Please note, This is one of the most frequently asked react interview questions.
28. What is an event in React?
An event is an action that a user or system may trigger, such as pressing a key, a mouse click, etc.
- React events are named using camelCase, rather than lowercase in HTML.
- With JSX, you pass a function as the event handler, rather than a string in HTML.
<Button onPress={lightItUp} /> |
29. What is a higher-order component in React?
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.
30. What is the meaning of create-react-app in React?
The create-react app in React is a simple command-line interface (CLI) that is used in the creation of React applications, which have no build configuration.
All tools are pre-configured when using the CLI, and this allows users to focus on the code more than on dependencies to develop the application.
The following syntax is used to start a simple project in React:
Create-react-app my-app
Want to download these React Js Interview Questions and Answers in the form of a readable and printable PDF for your interview preparation?
Click the download button below for the PDF version
Learn React Js From Our Expert Trainer
31. What are some of the advantages of using create-react-app in React?
Making use of create-react-app is advantageous in the following way:
- Support for JSX, ES6, and flow statements
- Already built and ready auto-prefixed CSS
- Fast interactive testing components
- Live development servers that help in debugging
- Scripts to handle JSS, CSS, and other files
32. What are the three phases of a component life cycle in React?
The following are the three phases of a component life cycle:
- Initial rendering: This is the phase that involves the beginning of the journey of the component to the DOM.
- Update: Here, the component can be updated and rendered again if required after it gets added to the DOM.
- Unmounting: The final phase involves the destruction of the component and its eventual removal from the DOM.
33. How is routing in React different from conventional routing?
Differences between the conventional routing and the routing in React can be shown using the following aspects:
- Pages: Each view is considered as a new file in conventional routing while it is considered as a single HTML entity in React.
- Navigation: In conventional routing, users have to move across web pages for viewing. In React, the views are not refreshed as objects are re-issued to create new views.
34. How do the parent and child components exchange information?
This task is generally performed with the help of functions. Several functions are provided to both parent and child components. They simply make use of them through props.
Their communication should be accurate and reliable. The need for the same can be their anytime and therefore functions are considered for this task.
They always make sure that information can be exchanged easily and in an efficient manner among the parent and child components.
35. What is a State in React and How is it used?
In React, State is an object that represents how the component renders and behaves.
States are the sources of data and allow you to create dynamic and interactive components. They are accessed using this.state(). For changing a value in the state object, call it using this.setState() method.
Learn React Js From Our Expert Trainer
36. Can AJAX be used with React?
Yes, any AJAX library, such as Axios and jQuery AJAX, can be used with React easily. One important thing is to maintain the states of the components, and here too, the props are passed from the parents to the child components.
Child components still cannot send back props to parents, and this factor greatly increases rendering efficiency when dynamic data is considered.
37. Why is a router required in React?
A router is very much necessary in React as it is used to manage multiple routes whenever a user types in a URL. If the route is present in the router for that corresponding URL, then the user is taken to the particular route.
To do this, the router library needs to be added in React. It can be done using the following syntax:
<switch>
<route exact path=’/’ component={Home}/>
<route path=’/posts/:id’ component={Newpost}/>
<route path=’/posts’ component={Post}/>
</switch>
38. What is the higher-order component?
In ReactJS a high-order component can be defined as the function that is mainly used to collect the component and returns a new component. These components are the patterns that are extracted from React’s compositional nature.
One important aspect of this component is that it is used as a reusable component logic in React. It provides us with the best way to share behavior between different React components.
39. How to embed two components in One component?
import React from ‘react’;
class App extends React.Component{
render(){
return(
<div>
<Header/>
<Content/>
</div>
);
}
}
class Header extends React.Component{
render(){
return(
<div>
<h1> Header</h1>
</div>
)
}
}
class Content extends React.Component{
render(){
return(
<h2>Content</h2>
<p>The Content Text!!!</p>
</div>
)
}
}
export default App;
40. How do you tell React to build in Production mode and what will that do?
Ordinarily, you’d utilize Webpack’s DefinePlugin strategy to set NODE_ENV to production. This will strip out things like prototype approval and additional notices.
Over that, it’s likewise a smart thought to minify your code because React utilizes Uglify’s dead-code end to strip out advancement just code and remarks, which will radically diminish the measure of your package.
Want to download these React Js Interview Questions and Answers in the form of a readable and printable PDF for your interview preparation?
Click the download button below for the PDF version
Learn React Js From Our Expert Trainer
41. What do you understand with the term polling?
The server needs to be monitored for updates concerning time. The primary aim in most cases is to check whether novel comments are there or not. This process is considered pooling. It checks for updates approximately every 5 seconds.
It is possible to change this period easily. Pooling helps keep an eye on the users and always makes sure that no negative information is present on the servers. It can create issues related to several things, and thus pooling is considered.
42. What is the StrictMode component used in React?
The StrictMode component when used would benefit users immensely while creating new codebases to understand the components being used.
However, it can fit well in debugging as well because it will help solve the problem faster when it is wrapped with other components, which could be causing the problem.
Next up on these interview questions on React JS, you have to understand how to speed up rendering.
43. What would you do if your React application is rendering slowly?
The cause of slow rendering in React is mostly because of the number of re-render operations, which are sometimes unnecessary. There are two main tools provided by React to help users here:
- memo(): This is used to prevent all of the unnecessary re-rendering carried out by the function components.
- PureComponent: This is used to ensure that the unnecessary re-rendering of class components is avoided.
44. Can you conditionally add attributes to components in React?
Yes, there is a way in which you can add attributes to a React component when certain conditions are met.
React has the ability to omit an attribute if the value passed to it is not true.
Consider the following example:
var condition = true;
var component = (
<div
value=”foo”
{ …( condition && { disabled: true } ) } />
);
45. What is the difference between createElement and cloneElement?
createElement is the thing that JSX gets transpiled to and is the thing that React uses to make React Elements (protest representations of some UI).
cloneElement is utilized as a part of a request to clone a component and pass it new props. They nailed the naming on these two.
Learn React Js From Our Expert Trainer
46. What is meant by event handling?
To capture the user’s information and other similar data, the event handling system is considered. It is generally done through DOM elements that are present in the code.
This task is simple to accomplish. Two-way communication is considered in this approach.
47. What is the second argument that can optionally be passed to setState and what is its purpose?
A callback work will be conjured when setState has completed and the part is re-rendered.
Something that is not talked about a great deal is that setState is asynchronous, which is the reason it takes a moment callback function.
Ordinarily, it’s best to utilize another lifecycle strategy instead of depending on this callback function, however, it’s great to know it exists.
Class Training extends Course
{
this.state = {
sampleItem: ‘learn’,
}
handleChange = (event) => {
console.log(this.state.sampleItem)
this.setState({
sampleItem: event.target.value //event.target.value = Welcome
}, () => console.log(this.state.sampleItem))
};
Output:
Learn
Welcome
48. What exactly can you do if the expression contains more than one line?
In such a situation, enclosing the multi-line JSX expression is an option. If you are a first-time user, it may seem awkward but later you can understand everything very easily.
Many times it becomes necessary to avoid multi-lines to perform the task reliably and for getting the results as expected.
49. What do you know about React Router?
Rendering the components is an important task in ReactJS. A React router is used to decide which components are to be rendered and which ones should not. It also performs dictation during several activities.
50. Compare Flux vs MVC
Conventional MVC designs have functioned admirably to separate the worries of data (Model), UI (View) and logic (Controller) — however many web engineers have found impediments with that approach as applications develop in measure.
In particular, MVC architectures as often as possible experience 2 primary issues:
Ineffectively defined data flow: The cascading updates which happen crosswise over perspectives frequently prompt a tangled web of events that are hard to debug.
Lack of data integrity: Model data can be changed from any place, yielding erratic results over the UI.
With the Flux pattern complex, UIs never again experience the ill effects of cascading updates; any given React component will have the capacity to recreate its state in light of the information given by the store.
The flux pattern likewise upholds data integrity by limiting direct access to shared data.
While a technical interview, it is awesome to talk about the contrasts between the Flux and MVC configuration designs inside the setting of a particular illustration:
For instance, imagine we have a “master/detail” UI in which the client can choose a record from a rundown (master view) and alter it utilizing an auto-populated form (detail view).
With an MVC architecture, the data contained inside the Model is shared between both the master and detail views. Each of these perspectives may have its particular Controller assigning updates between the Model and the View.
Anytime the information contained inside the Model may be updated — and it’s hard to know where precisely that change happened.
Did it occur in one of the Views sharing that Model, or in one of the Controllers? Since the Model’s information can be transformed by any performing artist in the application, the danger of information contamination in complex UIs is more prominent than we’d like.
With a Flux architecture, the Store data is correspondingly shared between different Views. However this data can’t be straightforwardly changed — the greater part of the solicitations to update the data must go through the Action > Dispatcher chain first, eliminating the risk of arbitrary data pollution.
At the point when refreshes are made to the data, it’s presently significantly less demanding to find the code requesting for those progressions.
Want to download these React Js Interview Questions and Answers in the form of a readable and printable PDF for your interview preparation?
Click the download button below for the PDF version
Learn React Js From Our Expert Trainer
51. What are Synthetic events in React?
React implements Synthetic events to improve the consistency and performance of applications and interfaces. The synthetic event is a cross-browser wrapper around the browser’s native event.
It combines the behavior of multiple browsers into a single API to make sure events have the same properties across different browsers and platforms.
52. Explain DOM diffing?
When the components are rendered twice, Virtual Dom begins checking the modifications elements have got. They represent the changed element on the page simply. Several other elements don’t go through changes.
To cut down the changes to the DOM as an outcome of user activities, DOM doffing is considered. It is generally done to boost the performance of the browser. This is the reason for its ability to perform all the tasks quickly.
53. Is it possible to nest JSX elements into other JSX elements?
It is possible. The process is quite similar to that of nesting the HTML elements. However, there are certain things that are different in this. You must be familiar with the source and destination elements to perform this task simply.
54. What are the limitations of React?
The few limitations of React are as given below:
- React is not a full-blown framework as it is only a library.
- The components of React are numerous and will take time to fully grasp the benefits of all.
- It might be difficult for beginner programmers to understand React.
- Coding might become complex as it will make use of inline templating and JSX.
55. How to prevent re-renders in React?
- Reason for re-renders in React:
- Re-rendering of a component and its child components occur when props or the state of the component has been changed.
- Re-rendering components that are not updated, affects the performance of an application.
- How to prevent re-rendering:
Consider the following components:
class Parent extends React.Component {
state = { messageDisplayed: false };
componentDidMount() {
this.setState({ messageDisplayed: true });
}
render() {
console.log(“Parent is getting rendered”);
return (
<div className=”App”>
<Message />
</div>
);
}
}
class Message extends React.Component {
constructor(props) {
super(props);
this.state = { message: “Hello, this is vivek” };
}
render() {
console.log(“Message is getting rendered”);
return (
<div>
<p>{this.state.message}</p>
</div>
);
}
}
- The Parent component is the parent component and the Message is the child component. Any change in the parent component will lead to re-rendering of the child component as well. To prevent the re-rendering of child components, we use the shouldComponentUpdate( ) method:
**Note- Use shouldComponentUpdate( ) method only when you are sure that it’s a static component.
class Message extends React.Component {
constructor(props) {
super(props);
this.state = { message: “Hello, this is vivek” };
}
shouldComponentUpdate() {
console.log(“Does not get rendered”);
return false;
}
render() {
console.log(“Message is getting rendered”);
return (
<div>
<p>{this.state.message}</p>
</div>
);
}
}
As one can see in the code above, we have returned false from the shouldComponentUpdate( ) method, which prevents the child component from re-rendering.
Learn React Js From Our Expert Trainer
56. What are the different phases of the component lifecycle?
There are four different phases in the lifecycle of React components. They are:
- Initialization: During this phase, React components will prepare by setting up the default props and initial state for the upcoming tough journey.
- Mounting: Mounting refers to putting the elements into the browser DOM. Since React uses VirtualDOM, the entire browser DOM which has been currently rendered would not be refreshed. This phase includes the lifecycle methods componentWillMount and componentDidMount.
- Updating: In this phase, a component will be updated when there is a change in the state or props of a component. This phase will have lifecycle methods like componentWillUpdate, shouldComponentUpdate, render, and componentDidUpdate.
- Unmounting: In this last phase of the component lifecycle, the component will be removed from the DOM or will be unmounted from the browser DOM. This phase will have the lifecycle method named componentWillUnmount.
57. How does the performance of using Hooks differ in comparison with the classes?
- React Hooks will avoid a lot of overheads such as the instance creation, binding of events, etc., that are present with classes.
- Hooks in React will result in smaller component trees since they will be avoiding the nesting that exists in HOCs (Higher Order Components) and will render props which result in less amount of work to be done by React.
58. What is React Router?ṣ
React Router refers to the standard library used for routing in React. It permits us to build a single-page web application in React with navigation without even refreshing the page when the user navigates.
It also allows you to change the browser URL and will keep the user interface in sync with the URL. React Router will make use of the component structure for calling the components, using which appropriate information can be shown.
Since React is a component-based framework, it’s not necessary to include and use this package. Any other compatible routing library would also work with React.
The major components of React Router are given below:
- BrowserRouter: It is a router implementation that will make use of the HTML5 history API (pushState, popstate, and event replaceState) for keeping your UI to be in sync with the URL. It is the parent component useful in storing all other components.
- Routes: It is a newer component that has been introduced in React v6 and is an upgrade of the component.
- Route: It is considered to be a conditional show component and some UI will be rendered by this whenever there is a match between its path and the current URL.
- Link: It is useful in creating links to various routes and implementing navigation all over the application. It works similarly to the anchor tag in HTML
59. What is the difference between createElement and cloneElement?
createElement is the thing that JSX gets transpiled to and is the thing that React uses to make React Elements (protest representations of some UI).
cloneElement is utilized as a part of a request to clone a component and pass it new props. They nailed the naming on these two.
60. What is meant by event handling?
To capture the user’s information and other similar data, the event handling system is considered. It is generally done through DOM elements that are present in the code. This task is simple to accomplish. Two-way communication is considered in this approach.
Want to download these React Js Interview Questions and Answers in the form of a readable and printable PDF for your interview preparation?
Click the download button below for the PDF version
Learn React Js From Our Expert Trainer
Other Related Topics Interview Questions
