Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Top 100+ React Redux Interview Questions and Answers 2020 (free)

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 ,

Where would you put AJAX calls in your React code?

It is possible to use any AJAX library with React, such as Axios, jQuery AJAX, as well as the inbuilt browser window.fetch. Data with AJAX calls need to be added to the componentDidMount() lifecycle method. By doing this, it is possible to use the setState() method for updating component as soon as the data is retrieved.

What is the use of Webpack?

Webpack in general is a module bundler, thanks to many plugins it provides although a lot more and it can be used to run tasks, clean build directories, check linting, handle typescript support, increase performance, provide chunking and a lot more.

What is the difference between DOM and virtual DOM in React.js?

DOM aka Document Object Model is an abstraction of structured code (HTML). Dom and HTML code are interrelated as the elements of HTML are known as nodes of DOM. It defines a structure where users modify the content present in the structure in any way they want (create, edit, alter, modify etc.). Basically, HTML is a text, DOM is an in-memory representation of this text.

Virtual DOM is a representation of DOM objects like a lightweight copy. It is used and provided for free by React.js

Why do we need a Router to React?

We need a Router to React so that we could define the multiple routes whenever the user types a particular URL. This way, the application of a particular router can be made when the URL matches the path defined inside the router.

Why did you choose to work with react?

This kind of question is less about rattling off facts related to JSX, Virtual DOMs, props, or state, and more about explaining to an employer why you have a professional interest in working with React JS. One of the main reasons this question (and your answer) is of interest to an interviewer is because it gives a sense of how you might explain the importance of using React to a non-technical client or stakeholder.

To answer, simply think of what drew you to React JS. It can be something as basic as the fact that React is easy to learn and start with, but allows plenty of room for growth over time (showing your willingness to learn new things and expand your knowledge as you go), or something as practical as the fact that there are so many job opportunities for React developers (showing you keep on top of the industry and are able to adapt as needed).

List down the advantages of React Router.
  • Just like how React is based on components, in React Router v4, the API is ‘All About Components’. A Router can be visualized as a single root component () in which we enclose the specific child routes ().
  • No need to manually set History value: In React Router v4, all we need to do is wrap our routes within the component.
  • The packages are split: Three packages one each for Web, Native and Core. This supports the compact size of our application. It is easy to switch over based on a similar coding style.
What is create-react-app?

create-react-app is the official CLI (Command Line Interface) for React to create React apps with no build configuration. We don’t need to install or configure tools like Webpack or Babel. They are preconfigured and hidden so that we can focus on the code. We can install easily just like any other node modules.

What are some of the major advantages to using react when building UIs?

Some of the major advantages of using React include:

  • Increased application performance via the Virtual DOM model
  • Improved coding efficiency with JSX
  • The ability to reuse components across multiple projects
  • Flexibility and extensibility through add-on tools provided by React’s open source community
Why are you not required to use inheritance?

In React, it is recommend using composition instead of inheritance to reuse code between components. Both Props and composition give you all the flexibility you need to customize a component’s look and behavior in an explicit and safe way. Whereas, If you want to reuse non-UI functionality between components, it is suggested to extracting it into a separate JavaScript module. Later components import it and use that function, object, or a class, without extending it.

How is React different from Angular and VUE?

The core difference between React and Vue is that React lacks any form of “abstraction”. It’s very much just straight JavaScript. This brings some of the drawbacks of of JS. If you’re a JS expert, React will give you more power. But if you are lacking the expertise, Vue will smooth some of the rough patches for you. It’s also worth noting that Vue doesn’t work with Arrow functions in the same way React does.

VUE.js was launched in 2014 and since then, it has been the most rapidly growing js framework. It is particularly useful for building intuitive interfaces while also being extremely adaptable. VUE is a web application framework that helps in making advanced single page applications.

Angular is a typescript based JavaScript application framework developed by Google, not a collection of libraries and it relies more on HTML than on JS. Despite the slowdown in recent years it’s actually used very widely for government and enterprise projects, which depend on a stable, well-established, and consistent ecosystem. It is also known as Super-heroic JavaScript MVW Framework. Its initial purpose was to encounter the challenges of creating single page apps. AngularJS is the oldest version of the Angular framework.

What is the second argument that can optionally be passed to setState and what is its purpose?

A callback function which will be invoked when setState has finished and the component is re-rendered.

Since the setState is asynchronous, which is why it takes in a second callback function. With this function, we can do what we want immediately after state has been updated.

What are Higher Order Components(HOC)?

Higher Order Component is an advanced way of reusing the component logic. Basically, it’s a pattern that is derived from React’s compositional nature. HOC are custom components which wrap another component within it. They can accept any dynamically provided child component but they won’t modify or copy any behavior from their input components. You can say that HOC are ‘pure’ components.

What is suspense component?

Suspense is a component that wraps your own custom components. It lets your components communicate to React that they're waiting for some data to load before the component is rendered. It is important to note that Suspense is not a data fetching library like react-async, nor is it a way to manage state like Redux.

Is it possible to display props on a parent component?

Yes, it is possible. The best way to perform this task is by using the spread operator. It can also be done with listing the properties but this is a complex process.

Name 3 ways to create a component in React and its differences.

There are 3 main ways of creating a component. Extending from the Component class, extending from the PureComponent class or using a stateless function as component. The main difference is that we don’t have access to lifecycle methods in a stateless function nor to the state. PureComponent also implements componentShouldUpdate by default and provides a shallow compare for its props and state preventing unnecessary re-renders.

Is setState() async? Why?

setState() actions are indeed asynchronous. setState() doesn’t immediately mutate this.state. Instead, it creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value. There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

The reason behind is the way setState alters the state and causes rerendering. Making it synchronous might leave the browser unresponsive. That being said, the setState calls are asynchronous as well as batched for better UI experience and performance.

What is the point of renderToNodeStream method?

It is used to render a React element to its initial HTML. Returns a Readable stream that outputs an HTML string. The HTML output by this stream is exactly equal to what ReactDOMServer.renderToString would return. You can use this method to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes.

What is prop drilling and how can you avoid it?

When building a React application, there is often the need for a deeply nested component to use data provided by another component that is much higher in the hierarchy. The simplest approach is to simply pass a prop from each component to the next in the hierarchy from the source component to the deeply nested component. This is called prop drilling. The primary disadvantage of prop drilling is that components that should not otherwise be aware of the data become unnecessarily complicated and are harder to maintain. To avoid prop drilling, a common approach is to use React context. This allows a Provider component that supplies data to be defined, and allows nested components to consume context data via either a Consumer component or a useContext hook.

What do you understand by “In React, everything is a component.”

Building blocks of the UI of a React application are components. These parts divide the entire UI into tiny parts that are autonomous and reusable. Then it becomes independent of each of these parts without affecting the remainder of the UI.

How do you say that state updates are merged?

State update are merged means that when you update only one key in the object state it will not affect the other keys. and key2 would not exist anymore in your state as it was not defined in your update. The merging affects key/value pair which are not included in your update.

What is the behavior of uncaught errors in react 16?

In React 16, errors that were not caught by any error boundary will result in unmounting of the whole React component tree. The reason behind this decision is that it is worse to leave corrupted UI in place than to completely remove it. For example, it is worse for a payments app to display a wrong amount than to render nothing.

How does JSX prevent Injection Attacks?

By default, React DOM escapes any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that’s not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent XSS (cross-site-scripting) attacks.

What do you understand by mixin or higher order components in ReactJS?

Higher order components (HOC) is a function that takes component as well as returns a component. It is a modern technique in React that reuses the component logic. However, Higher order components are not a part of React API, per se. These are patterns that emerge from React’s compositional nature. In other words, HOC’s are functions that loop over and applies a function to every element in an array.

What do you understand by Props in React?

Prop is a contraction for Properties in React. These read-only components need to be kept immutable i.e. pure. Throughout the application, props are passed down from the parent components to the child components. In order to maintain the unidirectional data flow, a child component is restricted from sending a prop back to its parent component. This also helps in rendering the dynamically generated data.

How is Virtual-DOM more efficient than Dirty checking?

First thing to understand here is that in React, each component has a state which is observable. React knows when to re-render the scene because it is able to observe when this data changes. The observables are significantly faster than the Dirty checking because we don’t have to poll the data at a regular interval and check all of the values in the data structure recursively. By comparison, setting a value on the state will signal to a listener that some state has changed. In a situation like that, React can simply listen for change events on the state and queue up re-rendering. Long story short, the virtual DOM is more efficient than the Dirty checking simply because it prevents all the unnecessary re-renders. Re-rendering only occurs when the state changes.

Is it mandatory to define constructor for React component?

No, it is not mandatory. i.e, If you don’t initialize state and you don’t bind methods, you don’t need to implement a constructor for your React component.

What is the difference between a controlled component and an uncontrolled component?

A large part of React is this idea of having components control and manage their own state. What happens when we throw native HTML form elements (input, select, textarea, etc) into the mix? Should we have React be the “single source of truth” like we’re used to doing with React or should we allow that form data to live in the DOM like we’re used to typically doing with HTML form elements? These two questions are at the heart of controlled vs. uncontrolled components.

A controlled component is a component where React is in control and is the single source of truth for the form data. As you can see below, username doesn’t live in the DOM but instead lives in our component state. Whenever we want to update username, we call setState as we’re used to.

What are the rules needs to follow for hooks?

You need to follow two rules inorder 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.
React has something called a state. What is it and how it is used?

States are the source of data for React components. In other words, they are objects responsible for determining components behavior and rendering. As such, they must be kept as simple as possible. Accessible by means of this.state(), state is mutable and creates dynamic and interactive components.

What is JSX?

JSX is a syntax extension to JavaScript and comes with the full power of JavaScript. JSX produces React “elements”. You can embed any JavaScript expression in JSX by wrapping it in curly braces. After compilation, JSX expressions become regular JavaScript objects. This means that you can use JSX inside of if statements and for loops, assign it to variables, accept it as arguments, and return it from functions. Eventhough React does not require JSX, it is the recommended way of describing our UI in React app.

Explain 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 in order to delay dispatch of an action if a certain condition is met. The two store methods getState() and dispatch() are provided as parameters to the inner function.

Is setState() is async? Why is setState() in React Async instead of Sync?

setState() actions are asynchronous and are batched for performance gains.

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value. There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

This is because setState alters the state and causes rerendering. This can be an expensive operation and making it synchronous might leave the browser unresponsive. Thus the setState calls are asynchronous as well as batched for better UI experience and performance.

What is the difference between async mode and concurrent mode?

Both refer to the same thing. Previously concurrent Mode being referred to as ""Async Mode"" by React team. The name has been changed to highlight React’s ability to perform work on different priority levels. So it avoids the confusion from other approaches to Async Rendering.

What does shouldComponentUpdate do and why is it important?

What shouldComponentUpdate does is it’s a lifecycle method that allows us to opt out of this reconciliation process for certain components (and their child components). Why would we ever want to do this? As mentioned above, “The end goal of reconciliation is to, in the most efficient way possible, update the UI based on new state”. If we know that a certain section of our UI isn’t going to change, there’s no reason to have React go through the trouble of trying to figure out if it should. By returning false from shouldComponentUpdate, React will assume that the current component, and all its child components, will stay the same as they currently are.

Explain React Decorators

Decorators in React help you take an existing Class component, or function of a Class component, and modify it, thereby allowing you to add extra capabilities, without having to mess with the existing codebase. Modification can be overriding the existing function completely, or just adding extra logic to it. In essence, decorators take one function, and return another function after spicing it up. React and decorators can go hand-in-hand due to presence of Higher Order Components , and Higher Order Functions.

What are the different phases of React component’s lifecycle?

There are three different phases of React component’s lifecycle: Initial Rendering Phase: This is the phase when the component is about to start its life journey and make its way to the DOM. Updating Phase: Once the component gets added to the DOM, it can potentially update and re-render only when a prop or state change occurs. That happens only in this phase. Unmounting Phase: This is the final phase of a component’s life cycle in which the component is destroyed and removed from the DOM.

What is the purpose of eslint plugin for hooks?

The ESLint plugin enforces rules of Hooks to avoid bugs. It assumes that any function starting with ”use” and a capital letter right after it is a Hook. In particular, the rule enforces that,

  • Calls to Hooks are either inside a PascalCase function (assumed to be a component) or another useSomething function (assumed to be a custom Hook).
  • Hooks are called in the same order on every render.
How would you debug an issue in react code? What debugging tools have you used?

Debugging as a crucial part of the development process. Before you start your next React JS job interview, make sure you have experience with the following industry standard debugging tools (and can explain how you’d use them):

  • Linters (eslint, jslint)
  • Debuggers (React Developer Tools)
What are the lifecycle methods of ReactJS?
  • componentWillMount: Executed before rendering and is used for App level configuration in your root component.
  • componentDidMount: Executed after first rendering and here all AJAX requests, DOM or state updates, and set up eventListeners should occur.
  • componentWillReceiveProps: Executed when particular prop updates to trigger state transitions.
  • shouldComponentUpdate: Determines if the component will be updated or not. By default it returns true. If you are sure that the component doesn't need to render after state or props are updated, you can return false value. It is a great place to improve performance as it allows you to prevent a rerender if component receives new prop.
  • componentWillUpdate: Executed before re-rendering the component when there are pros & state changes confirmed by shouldComponentUpdate which returns true.
  • componentDidUpdate: Mostly it is used to update the DOM in response to prop or state changes.
  • componentWillUnmount: It will be used to cancel any outgoing network requests, or remove all event listeners associated with the component.
How is ReactJs different from AngularJS?

The first difference between both of 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 as compared to the AngularJS. Another difference is React is equipped with Virtual Dom while the Angular has a Regular DOM. ReactJS is all about the components whereas AngularJS focus mainly on the Models, View as well as on Controllers. AngularJS was developed by Google while the ReactJS is the outcome of facebook. These are some of the common differences between the two.

What would be two of the most significant drawbacks of React?
  • Integrating React with the MVC framework like Rails requires complex configuration.
  • React requires the users to have knowledge about the integration of user interface into MVC framework.
What are synthetic events in React?

Synthetic events are the objects which act as a cross-browser wrapper around the browser’s native event. They combine the behavior of different browsers into one API. This is done to make sure that the events show consistent properties across different browsers.

Can you force a React component to rerender without calling setState?

In your component, you can call this.forceUpdate() to force a rerender.

What is arrow function in React? How is it used?

Arrow functions are more of brief syntax for writing the function expression. They are also called ‘fat arrow‘ (=>) the functions. These functions allow to bind the context of the components properly since in ES6 auto binding is not available by default. Arrow functions are mostly useful while working with the higher order functions.

Mention the key benefits of Flux?

Applications that are built on Flux have components that can simply be tested. By simply updating the store, developers are able to manage and test any react component. It cut down the overall risk of data affection. All the applications are highly scalable and suffer no compatibility issues.

Why are fragments better than container divs?
  • It’s a tiny bit faster and has less memory usage (no need to create an extra DOM node). This only has a real benefit on very large and/or deep trees, but application performance often suffers from death by a thousand cuts. This is one cut less.
  • Some CSS mechanisms like Flexbox and CSS Grid have a special parent-child relationship, and adding divs in the middle makes it hard to keep the desired layout while extracting logical components.
  • The DOM inspector is less cluttered.
What are refs in React?

Refs is the short hand for References in React. It is an attribute which helps to store a reference to a particular React element or component, which will be returned by the components render configuration function. It is used to return references to a particular element or component returned by render(). They come in handy when we need DOM measurements or to add methods to the components.

Is it ref argument available for all functions or class components?

Regular function or class components don’t receive the ref argument, and ref is not available in props either. The second ref argument only exists when you define a component with React.forwardRef call.

In ReactJS, why there is a need to capitalize on the components?

It is necessary because components are not the DOM element but they are constructors. If they are not capitalized, they can cause various issues and can confuse developers with several elements. At the same time, the problem of integration of some elements and commands can be there.

What are the benefits of using typescript with reactjs?

Below are some of the benefits of using typescript with ReactJS:

  • It is possible to use latest JavaScript features
  • Use of interfaces for complex type definitions
  • IDEs such as VS Code was made for TypeScript
  • Avoid bugs with the ease of readability and Validation
How would you structure a React application?

This is an open question with many possible answers. The basic structure is usually module or feature based. We usually differentiate between UI and logic. There are many approaches to structure UI components with the most popular being atomic design. Data and business heavy applications use a more domain driven approach. The ideal combination for larger applications is having the domain logic separate and having the UI logic in an atomic structure. All this can be combined in features which are rendered on pages.

What is the use of a super keyword in React?

The super keyword helps you to access and call functions on an object’s parent.

Why are String Refs considered legacy?

If you worked with React before, you might be familiar with an older API where the ref attribute is a string, like ref={'textInput'}, and the DOM node is accessed as this.refs.textInput. We advise against it because string refs have below issues, and are considered legacy. String refs were removed in React v16.

  • They force React to keep track of currently executing component. This is problematic because it makes react module stateful, and thus causes weird errors when react module is duplicated in the bundle.
  • They are not composable — if a library puts a ref on the passed child, the user can't put another ref on it. Callback refs are perfectly composable.
  • They don't work with static analysis like Flow. Flow can't guess the magic that framework does to make the string ref appear on this.refs, as well as its type (which could be different). Callback refs are friendlier to static analysis.
  • It doesn't work as most people would expect with the ""render callback"" pattern
When should you use the top-class elements for the function element?

If your element does a stage or lifetime cycle, we should use top-class elements.

What is the methods order when component is re-rendered?

An update can be caused by changes to props or state. The below methods are called in the following order when a component is being re-rendered.

  • static getDerivedStateFromProps()
  • shouldComponentUpdate()
  • render()
  • getSnapshotBeforeUpdate()
  • componentDidUpdate()
Explain the Virtual DOM and its working.

A virtual DOM is a lightweight JS object. It is simply a copy of the real DOM. A virtual DOM is a node tree that lists various elements, their attributes, and content as objects and their properties.

The render() function in React is responsible for creating a node tree from the React components. This tree is then updated in response to the mutations resulting in the data model due to various actions made by the user or the system.

Virtual DOM operates in three simple steps:

  • Step 1 – The entire UI is re-rendered in Virtual DOM representation as soon as there are some underlying data changes.
  • Step 2 – Now, the difference between the previous DOM representation and the new one (resulted from underlying data changes) is calculated.
  • Step 3 – After the calculations are successfully carried out, the real DOM is updated in line with only the things that actually underwent changes.
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.

How does React know when to re-render App component if we handle window resizing in useWindowSize?

When you call setSize inside the custom hooks, React knows that this hook is used in App component and will re-render it.

Explain Flexbox and its benefits

Flexbox is a layout-ing method which solves many previous problems with handling layouts in CSS. It eliminates the need for different GRID libraries and using floats to position blocks on the site. It has a very intuitive api and gives a lot more control and flexibility.

Why do we need a key property? Give an example when a bad key causes an error.

There are classic diffing algorithms with O(n³) time complexity, which might be used for creating a tree of React elements. But it means for displaying 1000 elements would require one billion comparisons.

Instead, React implements a heuristic O(n) algorithm with an assumption that the developer can hint at which child elements may be stable across different renders with a keyprop.

What about a bad key? Well, an index might be a very bad key if you decide to make your children removable. Check out this demo. Try to type something in the second input and then remove the first one. But you still can see the value in the second one, why so?

Because your keys are unstable. After removal, your third child with a key equals to 3, now has a key equals to 2. It’s not the same element for React now. And it will match it to the wrong DOM element, which previously had a key equals to 2 (which keeps the value we typed in a second input).

React unit tests vs integration tests for components.

It’s worth mentioning both Enzyme and react-testing-library.

React testing library provides a clean and simple API which focuses on testing applications “as a user would”. This means an API returns HTML Elements rather than React Components with shallow rendering in Enzyme. It’s is a nice tool for writing integrational tests.

Enzyme is still a valid tool, it provides a more sophisticated API which gives you access to component’s props and internal state. It makes sense to create unit tests for components.

What is windowing technique?

Windowing is a technique that only renders a small subset of your rows at any given time, and can dramatically reduce the time it takes to re-render the components as well as the number of DOM nodes created. If your application renders long lists of data then this technique is recommended. Both react-window and react-virtualized are popular windowing libraries which provides several reusable components for displaying lists, grids, and tabular data.

Explain the positives and negatives of shallow rendering components in tests.


  • It is faster to shallow render a component than to fully render it. When a React project contains a large number of components, this performance difference can have a significant impact on the total time taken for unit tests to execute.
  • Shallow rendering prevents testing outside the boundaries of the component being tested—a best practice of unit testing.


  • Shallow rendering is less similar to real-world usage of a component as part of an application, so it may not catch certain problems. Take the example of a component that renders a component. Within a real application, if the component is broken and throws an error, then would fail to render. However, if the unit tests of only use shallow rendering, then this issue will not be identified unless is also covered with unit tests.
What are the problems of using render props with pure components?

If you create a function inside a render method, it negates the purpose of pure component. Because the shallow prop comparison will always return false for new props, and each render in this case will generate a new value for the render prop. You can solve this issue by defining the render function as instance method.

Do you know what the reconciliation algorithm is?

It is the algorithm responsible for figuring out what changed between re-renders and how to update the actual DOM. It is basically a diffing algorithm. The latest addition of improvements on the core algorithm is called React Fiber.

How to prevent components from re-rendering?
  • shouldComponentUpdate() — returns ‘true’ by default. You can override if you know which props have to trigger an update.
  • PureComponents — The difference between them is that React.Component doesn’t implement shouldComponentUpdate method but React.PureComponentimplements it with a shallow prop and state comparison.
  • React.memo — The same as the previous one but it works with functional components.
How would you optimise the performance of a React application?

The most expensive task in a React app is the update of the DOM. The basic optimisation is to reduce how many times a component re-renders. This can be achieved by using componentShouldUpdate, using PureComponent or memoization libraries like reselect. Reducing the size of the final JS file also helps improving performance and we can use dynamic imports and chunks for this.

What are the drawbacks of MVW pattern?
  • DOM manipulation is very expensive which causes applications to behave slow and inefficient.
  • Due to circular dependencies, a complicated model was created around models and views.
  • Lot of data changes happens for collaborative applications(like Google Docs).
  • No way to do undo (travel back in time) easily without adding so much extra code.
What are the advantages of formik over redux form library?

Below are the main reasons to recommend formik over redux form library:

  • The form state is inherently short-term and local, so tracking it in Redux (or any kind of Flux library) is unnecessary.
  • Redux-Form calls your entire top-level Redux reducer multiple times ON EVERY SINGLE KEYSTROKE. This way it increases input latency for large apps.
  • Redux-Form is 22.5 kB minified gzipped whereas Formik is 12.7 kB

This post first appeared on Adaface, please read the originial post: here

Share the post

Top 100+ React Redux Interview Questions and Answers 2020 (free)


Subscribe to Adaface

Get updates delivered right to your inbox!

Thank you for your subscription