Top 20 React Interview Questions and Answers

Manav Pandya  Print   13 min read  
03 Sep 2019
 
914
  1. What is React?

    React is a JavaScript-based library which is used to create a SPA (Single Page Application) and different User Interfaces. React is developed and maintained by Facebook and other contributors. By using React, we can develop web and mobile application by just following component-based architecture, and by using React we can get the robust, scalable and high-performance application.

  2. What is Virtual DOM in React?

    DOM plays an important role in terms of web application performance, thus there are tons of frameworks are available who manipulates the DOM directly by adding, modifying or removing any existing element. When we perform any action on a page, at that time content should be updated based on the result of action and it should be reflected in the DOM. In React, Virtual DOM plays an important role by updating DOM which marked as a dirty. Basically, React’s Virtual DOM convert the dirty component into Virtual image of a component and compare it with the existing DOM, and based on the result of the comparison, the new DOM will be replaced by the existing DOM.

  3. What is the difference between Real DOM and Virtual DOM?

    When we change any action in an application, at that time real DOM should be updated, in this case, it would be expected that all that conversion task should be faster to achieve higher performance. Basically, a DOM or Real DOM is a structured collection of abstracted elements and the Virtual DOM is the abstraction of HTML DOM. Real DOM is existing elements structure, whereas Virtual DOM is the virtual tree of our application with the recent changes we have done. At the end of the comparison between Real DOM and Virtual DOM, the newly updated DOM will be rendered into the browser.

  4. What is Diffing Algorithm?

    Diffing Algorithm is used to compare different DOM tree, while in this algorithm it compares the two different root element and based on the difference result, it mounts the new tree and unmounts old one. For example, we have an element inside <div> and below is the old and new version of change.

     // Old
     <div id="mydiv">
     <img src="" />
     </div>
     
     // New
     <div id="mydiv">
     <a href="">Click Me</a>
     </div>
     

    Here is an above code snippet of two different versions of a <div>, we have changed <img> control to <a> element, now React will tear down the old tree and build the new tree from the scratch with the updated changes. And to keep in mind that the child element of the root element will also be unmounted.

  5. What are the Hooks in React?

    As per the official definition, React Hooks means.“Hooks let you use state and other React features without writing a class. You can also build your own Hooks to share reusable stateful logic between components” By using Hooks, we can share state using function component which acts as isolated reusable units it means now we don’t need to use class component for using state. One of the updates in Hooks is that we can write the state and update it even within a single line of code. Apart from using state in the function component, we can also access different lifecycle hooks using useEffect.

  6. What are the advantages of using create-react-app CLI?

    Creating a project of React is a very straight forward process and for that, we just need to install create-react-app package. But why we need to use it, there are few advantages to using create-react-app which are listed below.

    • One line command to set up React web app.

    • No need to mug-up all the configuration, because it provides the way to set up and minifies the production-ready app.

    • Application versioning can be well maintained.

    • It comes with the great package support like ESLint, Babel, Webpack and so on.

    • Upgrading the existing app to the latest version is less painful

  7. What is JSX?

    JSX stands for “JavaScript XML”.Basically, JSX is a syntax extension of the JavaScript, in other words, we can say JSX is a way to use JavaScript along with the HTML elements. It can be used as a template engine but it’s not necessary to use it compulsorily thus it has some advantages to use along with the React which are listed below.

    • Faster in rendering and performance

    • Can create a reusable component using JSX syntax

    • It will be very easy to create HTML structure by using JSX

  8. Why we should use JSX?

    Using JavaScript with XML makes it more useful while developing web application using React. While using React for web development, we need to perform various task along with with the UI like events, DOM manipulation, changes of states and props, managing reusable component and so on. By using JSX, we can embed code of JavaScript with HTML easily which allow us to manage errors, inline expressions, conditions, etc. Using Component, we can have HTML markup and business logic in a single file so that it can be a more manageable component in order to update anything. And of the main advantage is that JSX can be easily used by just using curly braces { } in our JSX file and we are good to go.

  9. How JSX works behind the scene?

    JSX syntax is different than JavaScript, but while we write anything in JSX, at last, it will be converted into JavaScript using Babel. When we create any component, at that time every element into the component will be transpired into a React.createElement () call. It means that every element should be converted into the React element before rendering, for example, we have a simple <h1> element in our component like this.

     render() {
     return (
     <div>
     <h1>Hello World</h1>
     </div>
    
     );
     }
    

    Here we have <h1> element inside the parent <div> element, but <h1> element will be converted using React.createElement() like this.

     React.createElement("h1", {}, "Hello, World");
     
  10. How to use custom JSX elements?

    We can create the component using JSX, same way we can also render reusable JSX element as a child element into the JSX file. For that, we just need to import the same component and can use it inside the parent JSX element as explained in the below example.

     render() {
     return (
     <div>
     // JSX Child file 1
     <Header />
     // JSX Child file 2
     <Content />
     // JSX Child file 3
     <Footer />
     </div>
     );
     }
    

    Here in this example, we have on parent element <div> and inside the parent element, we have three different elements which is basically a JSX element resides at a different location. So, when we run our application, our child JSX element will be rendered in a particular order.

  11. What is a Component?

    Component nowadays is a booming world, but we may have a question like what is Component. The component is a reusable, independent piece of code which contains the JavaScript and HTML component data. It can be exported from one place to another and using the import statement, we can access its various functionality developed in the component file. Basically, the component acts as a part of big application and duty of the component are to serve the specific functionality wherever it’s being used, and one of the important advantages using component is that we can create a loosely coupled system by dividing application module as chunk which called as “Component”.

  12. How to create a Component in React?

    In React, component just returns the JSX code which is used to render something in the DOM. Creating a component is a very straight forward thing, for that we just need to create “.js” file and code should look like this.

     import React from 'react';
     
     class Demo extends React.Component {
     render() {
     return (
     <div>
     <h1>Component in React</h1>
     </div>
     );
     }
     }
     
     export default Demo;
    

    As you can see that we have an import statement where we have used ‘react’ which means we are going to use react package for this component and its element “Component”.One thing to be noticed here is that we have used “React. Component” because we are going to use Component from the React package itself. We cannot skip “render ()” method which is used to render the JSX/HTML content from the current component. The last statement is to export the current component so that any component can access the current component by its class name.

  13. How many types of Component can be created using React?

    React primarily supports two types of Component structure which are listed below.

    • Stateful/Class based Component

    • Stateless/Function-based Component

  14. What is Stateful/Class based Component in React?

    Stateful Component or Class-based component can be created using ES6 class which is one of the features in ES6. Basically stateful component in React contains the internal state object which is used to manage component level data for the rendering purpose. Being a Class-based component, we can access different component from each other because there is communication possible between two components by passing the state from one to another. So whenever the state of the class will be changed, at that time the render () method also re-render its JSX/HTML content. Below is the simple example of a Stateful Component.

     import React from 'react';
     
     class Demo extends React.Component {
     constructor() {
     super();
     this.state = {
     message: "This is Stateful Component !!!"
     }
     }
     
     render() {
     return (
     <div>
     <h1>Hello {this.state.message}</h1>
     </div>
     );
     }
     }
     
     export default Demo;
    

    As you can see into the above example, that we have used a class which is part of ES6, and apart from that we have a constructor () which is again functionality of an ES6. One thing to be noticed that inside the constructor, we have used “this.state” which is component-level state management mechanism to populate data while rendering. We can manipulate the state object whenever we want for the current component.

  15. What is Stateless/Functional Component in React?

    Stateless or Functional component does not contain the state object and it follows purely a functional approach while creating the component. It is kind of simple function-based component which contains the “container” part, it means when we want to show data based on the request but don’t require a data to be changed than function component will be used. For example, we have data of 10 employees and we just need to show them as a list, then we can create function component and can return the list of the employee along with the design part.Keep in mind that functional component cannot maintain internal state object unlike Stateful component, but it can use props in order to populate data in a webpage. Below is the simple example of Stateless component.

     const functionalComponent = (props) => {
     <h1>Hello World !!!</h1>;
     }
     
     export default functionalComponent;
     

    Here in the above example, we have a simple function called “functional component” along with the props as an argument, and this function just returns the static message. We can use the function-based component while we want to use only rendering logic.

  16. What is Higher Order Component in React?

    As per the official definition on HOC is. “A higher-order component (HOC) is an advanced technique to React for reusing component logic” In other words, we can say that it accepts the component and returned the new processed component. Basically, HOC is not a part of React’s Component API, it is kind of third party component where we can use external component functionality by just importing it. Syntax of the HOC will look like this.

     const newComponent = myhoc(thisComponent);
    
  17. What is a State in React?

    The State in React is an instance of the React Component Class and it can be defined as an object of a set of observable properties that control the behaviour of the component by mutating its value. State in React is a heart of the application, which is used to maintain the component level data as well as the global state for the whole application. The object of the State is mutable in nature it means we can update the state value over the period of time. The important thing to be noted that the values of the State can be passed from the parent component to a child for the rendering purpose and parent component can update the state of the child.

  18. hat is Props in React?

    In React, Props and State is the heart for every application, and Props is same as State but there is some difference between them.Props in React is a way to pass the data to the Component which is exactly like the properties that contain the single value or object as a value. One of the important point about the Props is that it is “immutable”, means we cannot update it from the component anyhow, but we can make use of for the rendering purpose.

  19. How many types of Form input are supported?

    Forms in React is completely different than other libraries or frameworks, here In React, we need to manage everything from scratch like creating forms, validations and so on. There are two types of Form input are supported which are listed below.

    1. Controlled form inputs

    2. Uncontrolled form inputs

  20. What is react-router-dom?

    The react-router-dom is a library which is used to implement web app based routing functionality. Previously it was called “react-router” but now it’s split into the three different packages which are listed below.

    react-router-dom

    Used for implementing web application based routing

    react-router-native

    Used for implementing routing only for mobile application (i.e. React Native)

    react-router-core(deprecated)

    It is used to implementing core routing mechanism anywhere for the core React application

Summary

I hope these questions and answers will help you to crack your React Interview. These interview questions have been taken from our new released eBook React Interview Questions & Answers. This book contains more than 165 React interview questions.

This eBook has been written to make you confident in Angular with a solid foundation. Also, this will help you to turn your programming into your profession. It's would be equally helpful in your real projects or to crack your React Interview.

Buy this eBook at a Discounted Price!

React Interview Questions & Answers eBook

Take our free skill tests to evaluate your skill!

In less than 5 minutes, with our skill test, you can identify your knowledge gaps and strengths.

Learn to Crack Your Technical Interview

+
+
Accept cookies and close this message