Skip to main content

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){
   <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 );

Using JSX
const container = (
   <p>This is a text</p>

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 => {

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

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}`);

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

6 Life cycle method in React JS
Each component in react goes through three phases: Mounting, Updating and Unmounting.

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.

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.

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");
   <App />

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 :)


Popular posts from this blog

Interview Questions of SPFx SharePoint

What is SPFx? The SharePoint Framework (SPFx) is a web part model that provides full support for client-side SharePoint development, it is easy to integrate with SharePoint data, and extend Microsoft Teams. With the SharePoint Framework, you can use modern web technologies and tools in your preferred development environment to build productive experiences and apps that are responsive and mobile-ready. Scenario Based asking Scenario 1: Scenario: Your team is developing a SharePoint Framework (SPFx) web part that needs to retrieve data from an external API and display it on a SharePoint site. The API requires authentication using OAuth 2.0. The web part should also allow users to refresh the data manually. Question 1: How would you approach implementing this functionality in an SPFx web

Power Apps modern driven app Interview Question and answer

Question 1: What is a Power Apps modern driven app? Answer: A Power Apps modern driven app is a low-code/no-code application development platform provided by Microsoft. It allows users to create custom applications that can run on various devices and platforms without the need for extensive coding. These apps can be built using a visual interface and can integrate with different data sources. Question 2: What are the key components of a Power Apps modern driven app? Answer: The key components of a Power Apps modern driven app are: Screens : Screens serve as the user interface for the app and can include multiple layouts, controls, and data visualizations. Data sources : These are the various repositories where the app can retrieve and store data, such as SharePoint lists, SQL databases, Excel files, etc. Connectors : Connectors enable integration with external services and systems, allowing data to be fetched or updated. Formulas : Power Apps uses a formula language called Power Apps

Interview Question of Advanced SharePoint SPFx

1. What is WebPack? A module bundling system built on top of Node. js framework is known as a WebPack. It is capable to handle the combination and minification of JavaScript and CSS files, also other files such as images by using plugins. WebPack is the recommended way of bundling the files in JS framework and .Net frameworks. In the SPFx it is used with React Js. 2. What is PowerShell.? PowerShell is a platform introduced by Microsoft to perform cross-platform task automation and configuration management framework, it is made up of a command-line shell, a scripting language. it can be run on Windows, Linux, and macOS. 3. What is bundling and Minification? The terms bundling and minification are the processes of code compressing, which is used to improve the load and request time, It is used in modern JavaScript frameworks and .Net frameworks. It improves the load time by reducing the number of requests to the s