Top ReactJS Interview Questions and Answers

1 - What is ReactJS?

ReactJS is an open-source JavaScript front-end library created by Facebook. It is a declarative, efficient, and flexible library for building reusable UI components. It is based on the concept of a virtual Document Object Model, which is a representation of the actual DOM. The virtual DOM allows React to update the UI efficiently.

2 -What is the difference between Virtual and Real dom in ReactJS?

Virual Dom

React uses virtual dom. The virtual DOM is a lightweight JavaScript object. The virtual DOM is a virtual representation of the real DOM. Virtual DOM improves efficiency in react applications. The manipulating virtual DOM is very fast so every time the data changes in a react application, a new virtual DOM gets created.

Real Dom

1 - DOM manipulation is very expensive
2 - There is too much memory wastage and It updates Slow
3 - It can directly update HTML
4- It allows us to directly target any specific node (HTML element)

3 - What is jsx and why browser can't read jsx?

React JSX is an extension of JavaScript. It stands for JavaScript syntax extension. JSX makes it easier to write and add HTML code. JSX provides to write XML-like syntax in the same react file, where we write JavaScript code and then preprocessor (i.e., transpilers like Babel) transform these expressions into actual JavaScript code.

class App extends React.Component {  
  render() {  
    return(  
      <div>
       <h1>Hello Webrecto</h1>
      </div> 
    )  
  }  
} 

In React application, Browsers cannot read JSX directly because they can only understand JavaScript objects

4 - What is Props?

In ReactJS, the props are a type of object which stores the value of attributes of a tag. In the Reactjs application, the props are used to pass information from the parent to the child components throughout the application. Props are immutable so we cannot modify the props from inside the component.

  function MyApp(props){
    return(
      <ChildComponent name="webrecto" />
    )
  }

  function ChildComponent(props){
      return(
        <h2>My website name is {props.name}</h2>
      )
  }

  Output: My website name is webrecto
 

MyApp is parent component and ChildComponent is child component. In this example parent component is passing name attribute to childComponent through props.

5 - What is Children Props?

In the React application, the { props.children } property allows to create a generic template component that can be modified by the parent component when it is invoked. This means that a parent component can pass whatever is needed in the child component.

  function ParentComponent(props){
    return(
      <ChildComponent>
         <p>This is learning website.</p>
      <ChildComponent/>
    )
  }

  function ChildComponent(props){
      return(
        <h2>My website name is webrecto</h2>
        {props.children}
      )
  }

  Output: My website name is webrecto
          This is learning website.
 

6 - What is the difference between States and Props?

Props are a type of object which stores the value of attributes of a tag. Props are used to pass data from parent to child components. Props do not pass data from a child to the parent component. This is immutable and can not be changed within a component. Props make components reusable.

The state is an internal state of components and it allows components to create and maintain their own data. The state is mutable and can be updated using the setState function. The state holds information about the components and the state cannot be accessed by child components.

7 - What is the difference between stateless and stateful components?

A functional component is always a stateless component and does not have a local state. It depends upon the prop's value.

import React from 'react';
function ExampleStateless(props) {
 return(
    <div>
      <p>{props.first_name}</p>
    </div>
  )
}

Stateful component means full with state and dependent on their state. Stateful component render depends upon the value of the state.

import React from 'react';
function ExampleStateless(props) {
  constructor(props){
  super(props);
  this.state={name: 'webrecto'}
}
 return(
    <div>
      <p>{this.state.name}</p>
    </div>
  )
}

8 - What is arrow function in ReactJS?

The arrow function is a compressed and short version of the function expression. The arrow function is used as an alternative to functions within the class components, functional components, and event handlers. We use an arrow function in render to create a new function.

import React from 'react';
  finction Arrow(){
    const example=()=>{
      return "Hello Webrecto"
    }
    return(
      <h1>{example()}</h1>
    )
  }

  Output: Hello Webrecto

9 - What is an event in ReactJS?

An event is a type of action that can be triggered by a user or a system-generated event like a mouse click, loading of a web page, pressing a key or window resizes.

import React from 'react';

  finction AppComponent(){
    const show=()=>{
      // code
    }
    return(
      // we render the p with an onClick prop     
      <p onClick={show()}>Click me</p>
    )
  }

10 - What are the different phases of React component's lifecycle?

In React application, every component has its own lifecycle method. The component lifecycle has three main different phases for the complete process.
1 - Mounting phase
2 - Updating phase
3 - Unmounting phase

11 - Can web browsers read JSX directly?

No, web browsers cannot read JSX directly. React uses a transpiler to convert JSX into JavaScript that can be read by web browsers.

12 - What is React Router?

React Router is a library that allows you to navigate between different pages in your React application.

13 - What is a higher-order component in React?

A higher-order component acts as a container for other components. This helps to keep components simple and enables re-usability. They are generally used when multiple components have to use a common logic.