21 ReactJS Interview Questions & Answers 2023

Editor's note: This blog was originally published in October 2022 has been updated for accuracy.

Front-end developers have more and more choices when it comes to developing and building user interfaces for clients, companies, and start-ups. Just like technology itself, development is continuously evolving. A quick search on any job site will show you that an increasing amount of recruiters are searching for front-end web developers with React knowledge and experience. 

What is a React JS developer? A React JS developer understands the history, use and potential for deploying React as part of a web or mobile app interface. 

With more and more people vying for the best positions, you’ll want to stand out in interviews, by showing you don’t just know the information, but you can discuss it fluently. That’s why it’s important to know how best to answer ReactJS interview questions. 

You could spend hours combing through tutorials to freshen up you knowledge, OR you could read our quick list. We have compiled the most common questions and answers for each level of experience in the development field. We’ve covered basic questions for beginners, to intermediate and advanced React interview questions for developers with increasing levels of experience. 

Basic

1. What is React?

React is a flexible and efficient JavaScript framework library. It provides a way to easily create and share parts of the user interface, using JSX, which static HTML cannot do. It allows for creating reusable behavior across components, which makes it integral in developing and building simple, scalable, single-page web apps in particular. 

Fun fact: it was created in 2013  by Jordan Walke for Facebook.

2. What is a virtual DOM? 

The DOM, or Document Object Model, represents the entire application’s UI. The model is shown as a tree data structure, where there is a node for each UI element present in the web document, such as containers like div or span.

A virtual DOM is a less-substantial JavaScript object which is an in-memory representation of real DOM.  Each time the data changes in a React app, triggered by users or the system, a new virtual DOM gets created. By using virtual DOM, the changes only occur to that specific object in the real DOM, rather than updating all the objects in the real DOM each time. Creating a virtual DOM makes things work much faster.

3. What are the key features of React?

• JSX: Javascript XML, a syntax extension to JavaScript, is used in React to describe what the UI should look like. Using JSX allows for simplified writing of HTML inside JavaScript functions and placing it in the DOM without using functions like appendChild( ) or createElement( ).

• Components: Using a component-based system allows each individual entity to become completely reusable and independent of each other.

• One-way Data Binding:  React stabilizes the flow of data by using a unidirectional data flow. Changes to child components do not change the parent components.

• Virtual DOM: In React, when an object changes, virtual DOM changes only that specific DOM element in the real DOM, rather than changing all the objects.

• Simplicity: React has a relatively quick learning curve, clean abstraction, and it simplifies functions with reusable components.

• Performance: Because of the combined simplicity brought by using JSX, reusable components, unidirectional data flow, and virtual DOM, React results in much faster web applications.

4. What are some disadvantages of React?

React is not a complete framework — it is a library, and therefore has dependencies. The size of the library is so vast that it’s not uncommon for new and experienced developers to be overwhelmed or confused.

Using JSX  to write code can become complicated, and it requires inline template formatting. There are developers who don’t like using either methodology. Developers also must use other technologies to work on more than one layer or view, which is time-consuming.

5. What is JSX?

JSX stands for JavaScript XML and is a React extension which allows writing JavaScript code that looks similar to HTML. JSX allows for simplified writing of HTML inside JavaScript and placing it in the DOM.  This simplified execution (create-react-app) makes a React application powerful and boosts performance. Just like XML/HTML, JSX tags have a tag name, attributes, and children. For a web browser to read a JSX file, developers will use a compiler like Babel or WebPack to transform it into a regular JavaScript object.

6. How does ReactJS differ from AngularJS?

AngularJS was created in 2010 by Misko Hevery for Google. However, as of the end of 2021, Google no longer updates AngularJS to fix security, browser compatibility, or jQuery issues, and instead is releasing newer versions of Angular.

• Usage of DOM 

  • AngularJS uses Real DOM

  • ReactJS uses Virtual DOM 

• Data Binding 

  • AngularJS uses two-way binding

  • ReactJS uses one-way binding

• Framework 

  • AngularJS is an open source MVC framework

  • ReactJS is an open source JS framework

In addition, Angular is slower than React, due to the difference in DOM manipulation.

7. What are props and what are their purpose in React?

The props in React are the inputs to a component of React. These can be single-valued, or they can also be objects having a set of values. You could also say that props are data passed from a parent component down into a child component. This is done by using a naming convention, very similar to HTML-tag attributes.

Unlike parameters, which are mutable, props are immutable and read-only. For internal changes, you would use this.setState().

Props add a layer of protection to both security and performance by providing different component functionalities. These can include:

• Triggering a state change

• Passing custom data to the React component.

• Using through this.props.reactProp inside render() method of the component.

Intermediate 

8. What is the advantage of using Redux with React?

Redux is the official UI bindings layer. It simplifies the Flux Concept architecture by removing unnecessary hurdles, for example:

• Redux does not have a dispatcher function

• It uses only one store as opposed to multiple stores

• Action items are received and handled directly by that one store 

Redux is very useful for scaling apps. It does this by providing state management inside a unidirectional data flow model. In its store, it checks to see if data the component is requesting [action items] have changed, and if so it re-renders the component. Components re-render only when they actually need to do so.

These Redux functions are isolated and small, which in turn makes the overall code easier to test and more stand-alone. Redux ensures good React architecture with up-to-date API changes.  

9. Can you explain the Flux Concept?

Unlike Redux, Flux is not a library. It is an architecture that complements React.

React components pass data from parent components to children components. The Flux concept is a new kind of architecture, used by Facebook, that makes this model the default method for handling complex data inside a client-side application (as opposed to a server-side app) and manages how data flows in a React application. 

The only way to update the single source of data (or the store) is by triggering certain actions. Those actions call the dispatcher, and then the store is triggered and updated with its own data accordingly. After a dispatch has triggered and the store has updated, it will emit a change event that the views can rerender accordingly.

10. What are Hooks in React?

Hooks were added to React in version 16.8. Using Hooks allows you to use state and other React features without the need to explicitly write a class. 

A few top reasons for using Hooks are:

• Use of ‘this’ keyword might lead to complications when implementing class components. The developer needs to bind event handlers to the class components. Using Hooks solves unreliable hot reloading.

• There is no particular way to reuse stateful component logic to React. For advanced React users with experience in higher-order components (HOC) and the render props pattern, using those to solve this issue can result in making an ineffcient code base. Using Hooks allows for sharing stateful component logic more efficiently without changing the component hierarchy.

• Using Hooks simplifies creating components for complex scenarios, such as data fetching and subscribing to events. More often than not, the related code is not organized in one place but is dispersed among various life cycle methods. Hooks solve these issues by letting one component be split into smaller functions, rather than by forcing a life-cycle method based split. 

11. What are the differences between functional components and class components in React?

• Declaration 

  • Functional components can be declared either using an arrow function or the function keyword (an arrow function is a short way of writing a function in React)

  • Class components are declared using the ES6 class

• Handling props (properties)

  • In a functional component, props can be directly used inside HTML elements

  • Props in a class component must utilize “this” keyword, i.e. {this.props.name}

• Handling state

  • Functional components use the useState hook to set the state of a variable inside the component (in use, the useState hook returns an array of two items, the first contains the current state; the second item is a function used to update the state)

  • For updating the state of a class component, the specific function must be bound to “this.” After binding the function, the class component uses the setState function to update state (state uses setState() method to modify properties)

Fun fact: Until hooks were introduced, functional components were called “stateless components.”

12. Can you describe refs and how refs are used in React?

Refs is the shortened term used for references in React. Previously, refs were limited to class components. Now developers use the useRef Hook to access refs in function components.

Refs is used to change the value of a child component without the use of props (properties). Using the useRef Hook, they can be created and then immediately placed in a variable. To get a reference to the underlying DOM element (such as div or span), that variable is then passed to a given React element, providing it’s not a component. Executed successfully, the React element and its props will now be available on ref.current.

The Ref in React hook, commonly referred to as an "escape hatch", is mainly used for DOM measures, such as text selection, media playback or managing focus, that can't be done through React otherwise. 

13. What is SyntheticEvent in React?

Understanding that an event is a triggered action (the result of user action or a system generated event such as a mouse click, page loading, pressing a key, etc.), React uses an event handler system named SyntheticEvent.

It uses this to normalize all events to have consistent properties across multiple browsers, combining the response of different browser's native events into one API. Synthetic Event is a cross-browser wrapper of a browser's native event. SyntheticEvent has consistent application regardless of the current running browser.

14. What is the difference between React and React Native?

React JS is a front-end open-source JavaScript library used for building UIs. React Native, is an open-source, mobile framework which allows developers to use React on platforms like Android and iOS. A few other differences between them are:

Advanced

15. What are controlled and uncontrolled components in React?

Controlled and uncontrolled components are approaches to handling form data from elements in React. 

Controlled components have the ability to maintain their state. The alternative is uncontrolled components, where form data is handled by the DOM itself, and thus the state of the input element is handled by the DOM. 

Controlled Components are:

• Completely controlled by React, specifically the value of the input element

• A singular point of data for any forms

• Used to store the state of said input element inside the code; by using an event-based callback, any changes made to this input element [such as div] are then also reflected in the code.

Uncontrolled Components are different because:

• Control of them are handled by storing data in the DOM

• If the value of an input element is changed, no event-based callbacks are called; React does not perform any action when changes are made to their input element 

• Since an uncontrolled component keeps the source of truth in the DOM, it is sometimes easier to integrate React and non-React code when using them.

16. What is React Router and what are its main components?

Using React Router is needed because it maintains consistent behavior and structure which is important when developing single-page web applications. It is also needed because it enables multiple views in a single application, improving performance. 

This is done by defining multiple routes in the React application. To create these routes in a React application, a routing library was built on top of React and named React Router. By using this tool, a developer can build a single-page web application in React containing navigation that permits user navigation without refreshing the page. Another good example of use is that React Router will allow a user to change the browser URL, but will keep the UI in sync with the URL. When a user types a URL, if that URL path matches any 'route' in the router file, then the user will simply be redirected to that particular Route.

Below are the key components of React Router::

• BrowserRouter: This router implementation uses the HTML5 history API (such as pushState, replaceState, and popstate) for keeping the UI in sync with the URL. It is a parent component that is useful for storing all other components.

• Routes: An upgraded route matcher component introduced in React v6

• Route: Another route matcher component, considered to be conditionally shown. Sometimes UI will be rendered by this component if the UI path and current URL is a match.

• Link: A navigation component useful when creating links to various routes or implementing navigation across the application. This component works very similar to using an anchor tag in HTML.

17. What are the different ways to style a React component?

There are mainly 4 ways to style a React Component using CSS in React. All of these make use of the style attribute, which accepts a JavaScript object in camelCased properties, and which adds dynamically-computed styles in render time. 

• Inline Styling: providing the value of style is a JavaScript object:

• Using JavaScript object: done by creating a separate JavaScript object and setting the desired style properties; this object then becomes the value of the inline style attribute

• CSS Stylesheet: it is possible to create a separate CSS file and write all styles for the component inside this file; however, this file then must be imported inside the component file

• CSS Modules: alternatively, it’s possible to create a separate CSS module providing this module is imported inside our component.

18. Can you explain what higher-order components are used for?

A higher-order component (HOC) is an advanced technique in React for reusing component logic. The official React website states that this is a pattern in the API that emerges from React's compositional nature.

Whereas a component transforms props into UI, a higher-order component is a function that takes a component and returns a new component.

In scenarios where multiple components have to use a common logic, but without inadvertently changing the functionality of a specific component, a HOC formulates the original individual component by wrapping it in a container component. This is useful in a number of tasks, so HOCs are often used in manipulation of props, state manipulation and abstractions, render hijacking, code reusing, and bootstrap abstraction. 

19. What are the different phases of React component's lifecycle?

 React web apps could be described as a collection of independent components that respond and work depending on what interactions are made with them. Each React component, then, has a “lifecycle” of its own. The definition of a component’s lifecycle is: the series of methods used during different phases of that component’s existence. There are four different phases in a React component’s lifecycle. They are:

• Initialization: To prepare for its journey to the DOM, a component will contain the default props and initial state during Initialization. These default properties are performed in the constructor of that component (the constructor() method helps to set up the initial state and initial values).

• Mounting: The actual Mounting occurs when putting the elements into the browser DOM. The entire browser DOM currently rendered would not be refreshed during this phase because React uses VirtualDOM. (Mounting includes the lifecycle methods componentWillMount and componentDidMount.)

• Updating: Just as it says in the name, a component will update and re-render if a change, such as new Props or change State, occurs in a component. (Updating includes the lifecycle methods like componentWillUpdate, shouldComponentUpdate, render, and componentDidUpdate.) The purpose of this phase is ensuring a component is displaying the latest version of itself, and therefore it will cycle repeat again and again.

• Unmounting: Again, just as the name describes, this is the last phase of a component lifecycle where the component is removed or “unmounted” from the browser DOM. (Unmounting has the lifecycle method named componentWillUnmount.)  

20. Name a few techniques to optimize React app performance.

Identifying the underlying reason for any issues can be difficult, but the main origin of these types of problems is component re-rendering. It could be a component re-rendering more unexpectedly, or it could be that a component requires a data-heavy operation, causing each render to occur slowly.

React does provide two main tools to counteract the cause of slow rendering, which is often a number of unnecessary re-render operations. Those tools provided to help are:

• memo(): React states on their site that “this optimization helps to avoid expensive calculations on every render.” It is used to prevent any of the unnecessary re-rendering by caching CPU-Expensive functions.

• PureComponent: This is a base component class that checks the state and props of a component to decide if the component should be updated or if it can be avoided. Instead of using React.Component, it utilizes React.PureComponent to reduce unnecessary re-renders of a component.

• Maintaining State Colocation: Having numerous states inside a single component will lead to unnecessary re-renders for the component. Too many states inside a parent component makes code less readable and thus, harder to maintain. Maintaining state colocation is the process of moving the state to as close to where you need it as possible - shifting states less valuable to the parent component to a separate component.

• Lazy Loading: React comes bundled with the React.lazy API so that you can render a dynamic import as a regular component. The idea behind using this API is that lazy loading will load a component only when it is needed, thus reducing the load time of the React app.

21. Why use Flux over MVC?

MVC was one of the first UI architectures built over 50 years ago. It works well for many reasons - but there are key differences that make Flux a better choice. MVC architectures will often experience 2 major issues:

• Ineffectively defined data flow: Debugging can be difficult because events become tangled when cascading updates happen crosswise over perspectives. 

• Lack of data integrity: Because the model data can be changed from any place, developers may struggle with chaotic results across the UI.

Using the Flux concept, however, the UI is removed from any erroneous effect during a cascading update. The given React component will instead use the information shared by the store to recreate its state. Using Flux maintains data integrity by restricting direct access to any shared data. 

Here are some side by side comparisons:

Ready For Your Next Interview?

While this is by no means a definitive React glossary, it’s a good starting point for interview prep for anyone exploring a role at a large tech firm or starting freelance work as part of a new career in front-end web development. 

If you are a senior tech talent, don't let recruiters to waste your time with jobs that aren't exactly what you want. Instead, jumpstart your career by joining the MVP Match freelance network. 

We have connections with countless companies around the globe who are looking for freelancers or tech contractors to augment their teams. Using a personalized approach, MVP Match helps you find the best projects and companies for your skills and career interests.