React JS Interview Questions

1. What is Virtual DOM?

The term Virtual DOM is an abstraction of the HTML DOM that can render subtrees of nodes based on the state changes. It happened with the very least amount of DOM manipulation in order to keep your components up to date. 

DOM is the acronym for Document Object Model. Dom is also known as HTML DOM as it is an abstraction of the structured code called HTML for web developers. Dom and HTML code are interrelated as the elements of HTML are known as nodes of DOM. It defines a structure where users can create, alter, modify documents and the content present in them. So while HTML is text, DOM is an in-memory representation of this text.

Virtual DOM is an abstraction of abstraction as it has been derived from HTML DOM. It is a representation of DOM objects like a lightweight copy. The virtual DOM was not invented by React, it is only used and provided for free.

2 What are the differences between functional and class components?

Before the introduction of Hooks in React, 

functional components were called stateless components and were behind class components on a feature basis. After the introduction of Hooks, functional components are equivalent to class components.

Although functional components are the new trend, the react team insists on keeping class components in React. Therefore, it is important to know how these components differ.

On the following basis let’s compare functional and class comp

Function Component

function MyFunc(props){
 return(
   <div className="main-container">
     <h2>Title of the MyFunc</h2>
   </div>
 )
}

const MyFunc= (props) =>{
 return(
   <div className="main-container">
     <h2>Title of the MyFunc</h2>
   </div>
 )
}

Class Component

class MyFunc extends React.Component{
 constructor(props){
   super(props);
 }

 render(){
   return(
     <div className="main-container">
       <h2>Title of the MyFunc</h2>
     </div>
   )
 }
}

3 What is Hooks in React JS

Hooks is a new and advanced feature in React Js, it allowed you to pass the State and other React Life cycle events inside the function component, it is not requiring to write a class and It only supports the function components

1.  npm install react@16.8.0-alpha.1 --save  
2.  npm install react-dom@16.8.0-alpha.1 --save  

above commands can install hooks.

Basic Hooks

• useState
• useEffect
• useContext

Additional Hooks

• useReducer
• useCallback
• useMemo
• useRef
• useImperativeHandle
• useLayoutEffect
• useDebugValue

4 What is JSX?

JSX stands for JavaScript XML.

It allows us to write HTML inside JavaScript and place them in the DOM without using functions like appendChild( ) or createElement( ).

Without using JSX

const text = React.createElement('p', {}, 'This is a text');
const container = React.createElement('div','{}',text );
ReactDOM.render(container,rootElement);

Using JSX

const container = (
 <div>
   <p>This is a text</p>
 </div>
);
ReactDOM.render(container,rootElement);

5 What is controlled and uncontrolled components?

Controlled component:

the value of the input element is controlled by React JS, the state of the input elements are used event-based callbacks, 

any changes made to the input element will be reflected in the code by onChange function gets triggered and inside the code, we check whether the value entered is valid or invalid. If the value is valid, we change the state and re-render the input element with a new value.

Example of a controlled component:

function FormValidation(props) {
 let [inputValue, setInputValue] = useState("");

 let updateInput = e => {
   setInputValue(e.target.value);
 };

 return (
   <div>
     <form>
       <input type="text" value={inputValue} onChange={updateInput} />
     </form>
   </div>
 );
}

Uncontrolled component:

the value of the input element is handled by the DOM itself.

Input elements inside uncontrolled components work just like normal HTML input form elements.

The state of the input element is handled by the DOM. Whenever the value of the input element is changed, event-based callbacks are not called.

react js does not perform any action when there are changes made to the input element.

Whenever use enters data inside the input field, the updated data is shown directly. To access the value of the input element, we can use ref.

Example of an uncontrolled component:

function FormValidation(props) {
 let inputValue = React.createRef();

 let handleSubmit = e => {
   alert(`Input value: ${inputValue.current.value}`);
   e.preventDefault();
 };

 return (
   <div>
     <form onSubmit={handleSubmit}>
       <input type="text" ref={inputValue} />
       <button type="submit">Submit</button>
     </form>
   </div>
 );
}

6 Life cycle method in React JS

Each component in react goes through three phases: Mounting, Updating and Unmounting.

Mounting:

There are four built-in lifecycle methods that are called in the following order when a component is mounted:

constructor() - This is called before anything else. We can set the initial state of the component inside this method.

The constructor method is used to set the initial state and bind methods to the component.

getDerivedStateFromProps() - This is called before rendering the elements in the DOM.

In this method, we can set the state of the component based on the props we received. This method is used very rarely.

render() - This is the only required method in the class component. This method returns the HTML elements which are going to be rendered inside the DOM.

componentDidMount() - It is called right after the component is rendered inside the DOM. All the statements which require the DOM nodes can be executed in this method.

Network requests from a remote end-point can also be instantiated in this method.

Updating:

Updates in React JS are caused by changes in state or props. Update leads to re-rendering of the component. The following methods are called when a component is re-rendered:

getDerivedStateFromProps() - This method is called again when a component is being re-rendered.

shouldComponentUpdate() - This method is called before rendering the component when new props are received. It lets React know if the component’s output is affected by the newly received props or by the state change. By default, it returns true.

render() - To re-render the HTML inside the DOM, the render( ) method gets called again.

getSnapshotBeforeUpdate() - This method is called just before the newly rendered HTML gets committed to the DOM. It stores the previous state of the component so that React has an idea of what parts of the DOM need to be updated.

componentDidUpdate() - It is called after the component gets re-rendered. This method works just like the componentDidMount() method, the difference is that this method does not get called on initial render.

Unmounting:

componentWillUnmount() - This method is called just before the component gets destroyed. Any clean up statements should be executed inside this method.

7 Explain Strict Mode In React JS

It uses highlight potential problems in an application. It performs additional checks on the application.

Enable StrictMode

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
 <React.StrictMode>
   <App />
 </React.StrictMode>,
 rootElement
);

StrictMode helps with the below issues:

Identifying components with unsafe lifecycle methods

some lifecycle methods are unsafe to use in the async react app. With the use of third-party libraries, it becomes difficult to ensure that certain lifecycle methods are not used.

StrictMode helps to provide a warning if any of the class components use an unsafe lifecycle method.

Warning about the usage of legacy string API

If one is using an older version of React, callback ref is the recommended way to manage refs instead of using the string refs. StrictMode gives a warning if we are using string refs to manage refs.

Warning about the usage of findDOMNode

in an older version, findDOMNode( ) method was used to search the tree of a DOM node. This method is now deprecated in React JS. Hence, the StrictMode gives us a warning about the usage of this method. Warning about the usage of legacy context API (because the API is error-prone)

Hope it will help, Kindly share your feedback, so that, I can improve my blogs

Thank you :)

JavaScript advanced interview questions