We put together the most important React/Redux interview questions for beginner, intermediate and experienced candidates (updated for 2020). These best questions are categorized for quick browsing before the interview or to act as a detailed guide covering important topics.

If you are a recruiter, check out our popular React Online Test to screen candidates before taking them to second rounds.

Why can't browsers read JSX?

Actually, JSX is not considered as a proper JavaScript. Browsers cannot read them simply. There is always a need to compile the files that contain JavaScript Code. This is usually done with the help of JSX compiler which performs its task prior to file entering the browser. Also, compiling is not possible in every case. It depends on a lot of factors such as the source or nature of file or data.

How is Stateless component different from a Stateful component?

The stateless component calculates the internal state of the component but does not have the authority to change state. There is no knowledge about the past, current, or future but receives props from the Stateful component, which are treated as a callback function.

What is the difference between state and props?

Both props and state are plain JavaScript objects. While both of them hold information that influences the output of render, they are different in their functionality with respect to component. ie:

  • Props get passed to the component similar to function parameters
  • state is managed within the component similar to variables declared within a function.
What 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.

What kind of information controls a segment in React?

There are mainly two sorts of information that control a segment: State and Props

  • State: State information that will change, we need to utilize State.
  • Props: Props are set by the parent and which are settled all through the lifetime of a part.
Explain DOM Diffing in React.

The process of checking the difference between the new VDOM tree and the old VDOM tree is called ""diffing"". Diffing is accomplished by a heuristic O(n) algorithm. During this process, React will deduce the minimum number of steps needed to update the real DOM, eliminating unnecessary costly changes. This process is also referred to as reconciliation.

What do you understand by the term polling?

The server needs to be monitored to for updates with respect to time. The primary aim in most of the cases is to check whether novel comments are there or not. This process is basically considered as pooling. It checks for updates approximately every 5 seconds. It is possible to change this time period easily. Pooling help keeping an eye on the users and always make sure that no negative information is present on the servers. Actually, it can create issues related to several things and thus pooling is considered.

What’s the difference between an Element and a Component in React?

Simply put, a React element describes what you want to see on the screen. Not so simply put, a React element is an object representation of some UI.

A React component is a function or a class which optionally accepts input and returns a React element (typically via JSX which gets compiled to a createElement invocation).

Why should we not call setState in componentWillUnmount?

You should not call setState() in componentWillUnmount() because the component will never be re-rendered.

What is the difference between React Native and React?

React is a JavaScript library, supporting both front end web and being run on the server, for building user interfaces and web applications.

React Native is a mobile framework that compiles to native app components, allowing you to build native mobile applications (iOS, Android, and Windows) in JavaScript that allows you to use React to build your components, and implements React under the hood.

What are React Hooks?

Hooks are a new addition in 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.

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

If your component has state or a lifecycle method(s), use a Class component (or Hooks). Otherwise, use a Functional component.

How to prevent a function from being called multiple times?

If you use an event handler such as onClick or onScroll and want to prevent the callback from being fired too quickly, then you can limit the rate at which callback is executed. This can be achieved in the below possible ways,

  • Throttling: Changes based on a time based frequency. For example, it can be used using _.throttle lodash function
  • Debouncing: Publish changes after a period of inactivity. For example, it can be used using _.debounce lodash function
  • RequestAnimationFrame throttling: Changes based on requestAnimationFrame. For example, it can be used using raf-schd lodash function
Describe how events are handled in React.

The event handlers in React will be passed instances of SyntheticEvent to solve cross-browser compatibility issues. As we mentioned earlier, SyntheticEvent is React’s cross-browser wrapper around the browser’s native event. The synthetic events have the same interface as the native ones but they work identically across all browsers.

However, React doesn’t actually attach events to the child nodes themselves. Instead, it uses a single event listener in order to listen to all events at the top level which. Not only is this great for the performance but it also means that React doesn’t have to keep track of the event listeners when updating the DOM.

How to dispatch the data in-store?

We can dispatch the data to another component which should be based on the action which stores the parent component.

What do you understand by “Single source of truth”?

Single source of truth (SSOT) is the practice of structuring information models and associated data schema such that every data element is mastered (or edited) in only one place. Redux uses Store to store the entire state of the application at one location. So all the state of the component is stored in the store and the store itself receives updates. The single state tree makes tracking modifications simpler over time and debugging or inspecting the request.

Why is switch keyword used in React Router v4?

Within the Switch component, Route and Redirect components are nested inside. Starting from the top Route/Redirect component in the Switch, to bottom Route/Redirect, each component is evaluated to be true or false based on whether or not the current URL in the browser matches the path/from prop on the Route/Redirect component. Switch is that it will only render the first matched child.

How do you tell React to build in Production mode and what will that do?

You set process.env.NODE_ENV to production. When React in production mode, it’ll strip out any extra development features like warnings.

How do you access imperative API of web components?

Web Components often expose an imperative API to implement its functions. You will need to use a ref to interact with the DOM node directly if you want to access imperative API of a web component. But if you are using third-party Web Components, the best solution is to write a React component that behaves as a wrapper for your Web Component.

What is the benefit of strict mode?

It activates additional checks and warnings for its descendants. Note: Strict mode checks are run in development mode only; they do not impact the production build.

It is helpful in the following cases:

  • Identifying components with unsafe lifecycle methods.
  • Warning about legacy string ref API usage.
  • Detecting unexpected side effects.
  • Detecting legacy context API.
  • Warning about deprecated findDOMNode usage
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 request to clone a component and pass it new props. They nailed the naming on these two.

What are the rules one needs to follow regarding hooks?

You need to follow two rules in order to use hooks:

  • Call Hooks only at the top level of your react functions. i.e, You shouldn’t call Hooks inside loops, conditions, or nested functions. This will ensure that Hooks are called in the same order each time a component renders and it preserves the state of Hooks between multiple useState and useEffect calls.
  • Call Hooks from React Functions only. i.e, You shouldn’t call Hooks from regular JavaScript functions.
What are the conditions to safely use the index as a key?

There are three conditions to make sure, it is safe use the index as a key.

  • The list and items are static– they are not computed and do not change.
  • The items in the list have no ids.
  • The list is never reordered or filtered.
Explain Presentational segment

A presentational part is a segment which allows you to renders HTML. The segment’s capacity is presentational in markup.

What is Relay?

Relay is a JavaScript framework for providing a data layer and client-server communication to web applications using the React view layer.

Can we make changes inside child components?

Yes, we can make changes inside the child component in Props but not in the case of States.

What is route based code splitting?

A good place to start code splitting is with app routes. Break down an application into chunks per route, and then load that chunk when user navigate that route. Under the hood, webpack takes care of creating chunks and serve chunks to the user on demand.

We have to just create asyncComponent and import the desired component by using dynamic import() function.

Explain the purpose of render() in React.

Each React component must have a render() mandatorily. 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

, ,
etc. This function must be kept pure i.e., it must return the same result each time it is invoked.

What is render hijacking?

The concept of render hijacking is the ability to control what a component will output from another component. It actually means that you decorate your component by wrapping it into a Higher-Order component. By wrapping you can inject additional props or make other changes, which can cause changing logic of rendering. It does not actually ""ENABLES"" hijacking, but by using HOC you make your component behave in different way.

What are React Events?

Events are reactions (the library IS called React, right?) that are triggered by specific user actions like clicking on a UI button, hovering a mouse over a UI object, using keyboard commands with the UI, etc.

What do you know about Flux?

Basically, Flux is a basic illustration that is helpful in maintaining the unidirectional data stream. It is meant to control construed data 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 in you have to exhibit a profound comprehension of its usage.

What is ReactDOMServer?

The ReactDOMServer object enables you to render components to static markup (typically used on node server). This object is mainly used for server-side rendering (SSR). The following methods can be used in both the server and browser environments:

  • renderToString()
  • renderToStaticMarkup()
How do the parent and child components exchange information?

This task is generally performed with the help of functions. Actually, there are several functions which 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 of same can be there 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.

What are controlled components?

In HTML, form elements such as ,