19 Best React Interview Questions & Answers

We've compiled the absolute best react interview questions and answers to help you in your upcoming job interview. In order to prepare for your future interview, we recommend that you take some time to study these potential questions and answers. Sit down with a friend, have them give you a few behavioral questions which an interviewer might ask at random. Then ask them to supply a few of these questions to you on their own accord.

Why should you know react as a developer?

React is a Javascript framework used to build Single Page Web Applications (SPAs). The framework is developed and maintained by Facebook. Since its initial development and internal usage at Facebook in the early 2010s, React has quickly become the most widely used tool for Front end software developers. Because of its ubiquity, but also because of its un-opinionated feature set and small, easily understood API, React is an absolute essential for those in the field of front end software development. These questions focus on both the practical applications and concepts that make React a powerful tool.

19 react interview questions and answers

Below are is our react guide.

1. Describe React’s Virtual DOM. What does the Virtual DOM do, and what are some advantages it gives to applications written in React and to developers using React?

The DOM is the document object model. You can think of it as the tree-like structure of HTML that describes the content and structure of a page in your web application. The React Virtual DOM is a representation of the browser’s real DOM that React holds in memory and uses to perform optimizations.

Whenever the data inside a React application changes, the visual state of the application’s user interface will need to change as well. React components which consume and display the application’s data will need to be re-rendered, and re-rendering is an expensive operation for the browser. Instead of re-rendering every component in the DOM structure; however, React uses the Virtual DOM to calculate which components are actually affected by the data-change and need a visual update.

Because only the components which need to be re-rendered are re-rendered by the browser, React applications get a big performance boost. There is also an enormous benefit to the developer. Because of the React Virtual DOM, the developer can “imagine” that the entire user interface is re-rendered every time any bit of application data changes. This generalization makes an application extremely easy to reason about because it means the visual state of the application is always guaranteed to be in sync with the data-model backing it.

2. What is a React component?

A React component is the central building block of a React application. To put it another way, a React application is built by assembling components together.

Imagine an tag in plain HTML. Putting an img tag into your HTML markup tells your web browser that it will fetch some image data from a web address, and render that image data within the web browser’s window (perhaps in some specified dimensions). As a developer, you can pass data into the img tag to specify where the image will come from as well as the dimensions in which it should be rendered. For example:

<img src=”http://image-source.com/image.jpg” width=”100px”></img>

A React component is like an img tag that you, as a React developer, create. Similarly to how an img tag encapsulates functionality like fetching image data and rendering it in a specific dimension, with React you can build components to be invoked by their own , with their own built-in functionality like fetching data, executing logic, building lists, creating visual effects, or any other types of logic that you could imagine.

3. What is React / the React team’s position on separation of concerns and frontend web applications, specifically in reference to template-driven frameworks?

React argues that their component-driven architecture enforces a proper separation of concerns in a frontend application by keeping HTML markup (JSX) and Javascript business logic within the same module. This is contrary to template-driven frameworks like Angular which split templates and business logic into .html template files and .js files, respectively.

The argument React makes says their components are a proper separation of concerns because they increase cohesion and decrease coupling in an application. Coupling is decreased because unlike in a template-driven framework, developers do not need to traverse the file-system to edit controllers and corresponding templates for each component. Cohesion is increased because display markup and javascript business logic are concerned with the same things; together they render data to the user and allow interactions.

4. What does the React team mean when they say template-driven frameworks lead to underpowered templates?

Templating languages depend on new abstractions and syntax in order to support features like inserting variables, looping, and the like. For example, in an Angular template, a developer must use ngRepeat to create a loop. In a Handlebars template, there is a similar template convenience for looping called #each.

React says these template languages are underpowered because while they often have support for fairly advanced features (e.g. we can go a bit beyond looping), they do not have the full expressiveness of Javascript. These abstractions like #each also keep us from using powerful paradigms in our templates like functional programming. For example, if a developer wants to express a .map().filter().reduce() style of functional programming, how would they do so in a templating language?

This is important because unlike a templating language, React’s JSX templates allow developers to use the full expressiveness of Javascript. Javascript code can be inlined anywhere into JSX templates simply with an opening & closing bracket {}.

5. What is one directional data flow? Why is it important?

One directional data flow has been a central concept to React since its initial launch. The idea is that view components do not have a mechanism by which they can automatically update models in the application (think ng-bind in Angular.js or another framework with two-way data binding). Instead, updates to the application’s data models can only be made by explicitly invoking business logic which updates the model. The changed data-model then cascades down to the components which render it.

One directional data flow is important for React because it increases the maintainability of applications. If a developer has a handle on when and how data is updated in the application, it becomes easy to reason about the data model, understand the intended application state, and debug problems when the application state does not coincide with expectations.

6. What is React Native?

React Native is a framework that can be used to develop native applications for iOS or Android operating systems. It uses a virtually identical syntax and programming style to React web-applications, so the learning curve for frontend developers who are experienced in React development is low when switching over to native development with React Native.

Because it is a Javascript framework, developers also have the same ecosystem of Javascript packages at their disposal as would a front end developer. This means in a React Native application, a state-container like Flux or Redux could be used and potentially even shared with a web application that has similar goals.

7. What is React Next, what is it used for?

React-Next is a server-rendered frontend framework, meaning that the content for your user interface is generated on the server and then delivered to the user’s browser as fully compiled HTML. This is different from a traditional React application, which usually uses HTTP requests from the javascript application to the server to fetch content which then populates an empty HTML template.

This is important for React applications which support a content-driven website that needs to be searchable. For example, if you want to use React to build an informational website about your business, the content rendered on your pages needs to be findable by Google and other search engines. React Next can help you solve this problem by providing server-rendered, search-friendly content paired with the developer experience and user interactions offered by React.

8. Explain the function componentDidMount(). What sort of responsibilities might this function have?

componentDidMount() is a method that all React components have. When building a React component developer can choose what logic to put inside componentDidMount, and that logic will be executed immediately after their React component is rendered onto the users’ screen.

This function is good for holding logic which involves interacting with DOM elements because the DOM becomes available within the scope of your React component the instant after it gets rendered to the screen. Other uses for this function might include setting up timeout or interval functions.

9. Explain the concept of State in a React component.

All React components can have their own internal state, defined as a variable `this.state` within the scope of the component. The internal state of a component can be updated by calling the method setState(newState), where newState is an object carrying values to patch the existing state object. Or, values can be set on the internal state object with regular Javascript equals syntax, followed by invocation of the forceUpdate() method.

10. As a developer how do you implement events like click events in your React components?

In order to implement events, you can write familiar javascript event bindings on your JSX templates. onClick, onMouseOver, onMouseLeave, etc are all available events that conform to the same interface as native events in most browsers.

You can write an onClick method on a button element like so:

<button onClick={this.exampleFunction}>Click me</button>

11. Explain what Props are in a React application?

Props are data that is passed into a React component like so:

<ExampleComponent propExample={‘hello’} />

Props are always passed from a parent component into a child component, and they are immutable (they can’t change) within the scope of the child component. If a child component wants to update the props which have been passed to it, then the child component must invoke a method also passed to it via props in order to update the data. Like so:

<ExampleComponent propExample={‘hello’} updatePropExample={this.updatePropExample} />

In this case, in order to update props from within ExampleComponent, we would have to invoke the updatePropExample method.

12. Explain the difference between one-way data flow and two-way data binding.

Two-way data binding uses watchers which continually check both the value of input elements in the UI and the values being held in the data model. As model values change either due to user inputs or because of logic being executed that changes the values, the watchers are communicating back and forth to update the data in either the UI or the model in order to keep the data in the UI and model in sync.

In a one-way data flow there are no watchers which are capable of update the UI or the model data values. Instead, all updates to the data model are executed explicitly by the user, usually by executing a function with an event binding to some button or another type of element on the interface.

13. What is JSX?

JSX stands for Javascript XML, and it is the markup language used within React components do describe the layout of the elements in a component. Syntactically, JSX looks virtually identical to HTML, and it allows the full expressiveness of Javascript to be used within your React component templates. For example:

<div> {[1,2,3].map(num => <span>{num}</span>)} <div>

Is perfectly valid JSX syntax. Notice that we are using native javascript directly within our template; this is what makes JSX a powerful tool within React.

14. What is one tool that helps debug React applications, and how?

React dev tools is a great tool for analyzing and debugging React applications. It can be used as an add-on to the standard Chrome or Firefox developer tools, and it provides unique interfaces and interactions for exploring the structure of your React component tree and the internal state and props being used to display data to your users.

In React dev tools, a user can make changes to various pieces of application state in their components to view outcomes on the UI, and they have an easily navigable interface for traversing the tree structure of their React application.

15. Explain the lifecycle method componentWillUnmount();

componentWillUnmount() is another React component life-cycle method. Unlike componentDidMount(), which is executing directly after the component is rendered to the DOM. componentWillUnmount() is executed directly before your React component is removed from the DOM.

This method is often used to clean up event bindings or interval functions (that were often set in the componentDidMount lifecycle method).

16. What does React mean by saying the React framework is the “V” in MVC?

React is only intended to handle the rendering of the visual layer of your application. For this reason, it is compared to the View in a traditional Model-View-Controller application. In a practical sense, this means that React components are not intended to handle responsibilities like fetching data from an API, holding/maintaining the full application state, or executing algorithmic logic. For those types of responsibilities, React recommends using a state container library like Redux.

17. Explain Prop Types.

Prop Types are a way for a developer to declare the data type of an argument (prop) that is passed to a React component. When declaring the Prop Types for a React component, the developer can declare that a prop must be one of the primitive Javascript types like String, Number, Array, or Object for example, or, the developer can also create their own custom data types and declare those as Prop Types for components. Props can also be declared as required or optional, and defaults can be provided for Props. Using Prop Types is intended to provide some of the benefits to a full type system like that in Java or C++.

18. Is the following a valid return value for a React component’s render() method?

`<div>Hello</div><div>World</div>`.

In all but the most recent versions of React, this is not a valid return value for a React component, because there is no wrapper element surrounding the two adjacent div elements. The latest versions of React (post mid-2018, > version 16) have started adding support for adjacent elements with no wrapper.

19. When is the `key` attribute used in React? What can happen if it is not used?

The `key` attribute should be added to list elements in React components when the component is responsible for iterating over some iterable object and rendering an element to the DOM for each iteration. React uses the `key` attribute internally when running its reconciliation algorithm in order to decide which elements on the screen need to be re-rendered. Neglecting to use the `key` attribute on list elements can lead to unexpected and incorrect rendering behavior, and will cause warnings to be thrown in the developer console.

Share

Help us by spreading the word