Top 18 React Interview Questions and Answers in 2021

Let’s understand what React.JS is? React.JS is a declarative, flexible, and efficient JavaScript library for developing user interface components. It is used for building web applications, mobile applications, and native applications. The power of React lies in using virtual DOM which makes it efficient in maintenance and scalable to work with in a large scale project.

It is the second most loved framework according to Stackoverflow Developer Survey (2020).


Stackoverflow developer survey 2020
Credit: Stackoverflow


This makes it a suitable library or framework to make a career in growth and learning. We have divided the React JS interview questions into the below sections:


  • Basic questions
  • DOM and API
  • Components
  • Redux
  • Router


Basic Questions


1) What are the advantages and disadvantages of React.JS?


Advantages of React.JS 


  • Good learning curve:  React.JS has a good online community and support is available for training and learning. 
  • Reusable: It is made of components which are combined with other components to provide reusability. 
  • SEO support:  Provides SEO inclusion and hence supports businesses by better rankings. 
  • Better speed:  Provides better speed through virtual DOM. 


Disadvantages of React.JS 


  • Frequent changes: Technology is changing and upgrading at a fast pace, and therefore the programmer has to keep up with the learning process continuously. 
  • Documentation: There is no proper documentation available for React.JS due to frequent changes and upgrades in the technology. Therefore, the process of maintaining written documentation is a hassle. 
  • JSX increases complexity: Usage of JSX in React.JS increases the complexity and confusion for the new programmers. Therefore, they need to add this to their training schedule. 


2) What do you understand by an event in React.JS and how to create it?


Event means reactions after a user actione.g. mouse click, mouse hover, double click, keypress, etc. Handling events is similar to handling HTML DOM(Document Object Model) events. The difference is that in React.js we use JSX and pass the function as ‘event handler’. Also, we cannot pass ‘false’ as a return value to stop default behaviour, we specifically need to call ‘preventDefault()’. Find out more about React.JS events.


Example for React.JS event


DOMs and APIs


3) Explain the differences between real DOM and virtual DOM in React.JS.


DOM means Document Object Model in HTML, the elements in HTML are represented as nodes of the DOM. HTML is a text written inside tags, and DOM is a structural representation of those components.  

A virtual DOM is a lightweight copy of the real DOM, which can be considered as a tree consisting of nodes. These nodes contain information about elements and their attributes. 

Whenever there is a change in the virtual DOM due to a user action React updates the particular node. Then it compares this changed virtual DOM to the previous virtual DOM before the update and gets to know which nodes have to be updated. Now, finally, React will update only those nodes in the real DOM which were updated in virtual DOM. And these changes in real DOM affect the rendering on the screen.


4) How can one prevent injection attacks in React?


JSX used in the react framework prevents injection attacks. By default, react DOM escapes any values embedded in JSX. This helps in ensuring that we cannot inject anything which is not explicitly written in code. Because everything which is being rendered on the screen is first converted to a string. Due to this feature, XSS (cross-site scripting) is prevented by JSX in React.JS. 



Fancy a challenge?

React Quiz

Click 'next' to begin the quiz!






5) Explain the differences between stateful and stateless components in React.JS

differences between stateful and stateless components


6) What is a state in React? How can we implement it? 


A state is an object in React.JS which determines the component behaviour and their rendering. It is a data source containing information about the react component. These are the properties of the component that control the behaviour of the object. 

The state of the component can be accessed using this.state() and can be updated using this.setState().


7) When would you use a Class Component over a Functional Component? 


If the component which we are using has states(react lifecycle), then we should use Class components otherwise we should use react functional components. Class components are also called Stateful components because they implement state and logic. 

An example of a lifecycle method is componentDidUpdate() method. 


Image Credit


8) Explain the differences between props and state in React.JS.


differences between props and state in React.JS.


9) Explain the differences between class and functional components in React.JS.



10) What is HOC in React.JS?


Higher Order Components(HOC) is a function that accepts a Component as an argument and returns a Component.

 you can write a HOC to transform its input to lowercase. HOC is especially useful in the scenarios where we find ourselves writing a lot of code in different places that do the same thing, which you can refactor the code into a reusable HOC. It is an advanced technique to enhance reusability in React.JS.

These HOC receive data and return data based on the input data, and to update the HOC we need to change the input data. Interestingly, HOC transforms one component into another component by wrapping it into a container component.

Read more about High Order Components here.


11) What are the methods which create a component lifecycle in React?


The popular component lifecycle methods in React are: 

  • componentDidMount: It is executed after the first render. It is used to trigger the other lifecycle methods. 
  • shouldComponentUpdate: It returns true or false value to determine if a component will be updated or not.  
  • componentDidUpdate: It is called after rendering. 
  • componentWillUnmount: It is called after the component is unmounted. 


12) Explain the ways to prevent a function from being called too quickly. 


During using event handlers like onClick or onScroll, there could be frequent and too fast calls which we would want to prevent. Below are the ways to prevent it: 

  • Throttling: Prevents calling of a function repeatedly in a specified time. 
  • Debouncing: Introduces a delay between two executions of a function.  
  • requestAnimationFrame throttling:  It is a technique where a function to be executed is queued for optimising the rendering of the function. 

Refer to the examples with code snippets here. 







13) What are the components of Redux in React.JS?


Redux has below components: 

Image Credit
  • Actions: They are events like user interactions and API calls etc. which help sending data from an application to the Redux store. The actions are sent using store.dispatch() method. 
  • Reducers: They are pure functions which take a current state of a function as input, perform some action on it and then return the new state. All logic resides in the reducers. 
  • Store: It stores the application status, and it is recommended that only one store should be used per application. Stores the entire state tree of the application. 
  • Middleware: They are the interceptors of the action which are sent from components before passing them to the reducer function. 
  • View: It displays the data sent by the store by combining dumb and intelligent components. 


14) What are the differences between Redux and Flux in React.JS?


Redux vs Flux
Image Credit



15) What are the advantages of Redux?


  • Manageable: State of applications is easily manageable due to centralised global access. 
  • Debugging: It is easier to debug due to single store and complete error reports are sent to the server. 
  • Flexible: Provides add-ons to be used in the UI layers, which makes the development easier and flexible. 
  • Reusable: Promotes reusability due to global accessibility, same code can be tested on the client, server, and native environments. 
  • Maintenance: Redux has strict guidelines regarding the code structure, hence it becomes easy to maintain. 
  • Community support: Redux has great community support to help the developers when any issues are faced by them. 


16) Under what conditions would you consider using Redux with React? 


React Redux is recommended during the below scenarios: 

  • When the application states are changed frequently using complex logic. 
  • The application has a large codebase with many people working on it simultaneously. 
  • When monitoring of the application states is needed. 
  • When the application has a large number of application states used by different components. 




17) What are the advantages of Router in React.JS? 


  • Helps in dynamic route matching. 
  • Provides a browsing history feature to restore the state of the view. 
  • It provides a standard application structure for ease of understanding by team members. 
  • Eases the handling of nested views. 
  • It has slow code loading. 


18) Why do we need a Router in React.JS?


We need a router to navigate through the views of different components in a React application. It helps in displaying different views on a single-page application. It is a standard library/API which is used for dynamic routing in React.JS. It uses a component structure to call the components.

Using the react router, we can go forth and back, refresh the page and still maintain the view of the page without white flashes.