React Interview Questions

1) Differentiate from Real DOM to Virtual DOM.

Real DOM	Virtual  DOM
1. It updates slow.	1. It updates faster.
2. Can directly update HTML.	2. Can’t directly update HTML.
3. Creates a new DOM if element updates.	3. Updates the JSX if element updates.
4. DOM manipulation is very expensive.	4. DOM manipulation is very easy.
5. Too much of memory wastage.	5. No memory wastage.

2) What is React?

• React is a Facebook-developed front-end JavaScript library in 2011.
• It follows the component-based approach that helps build UI components that can be reused.
• It is used for complicated, interactive web and mobile user interface development.
• Although it was only open-sourced in 2015, it is supported by one of the biggest groups.

3) What are the characteristics of React?

• Lightweight DOM For Better Performance
• In React, everything is treated as components.
• React uses JSX (JavaScript eXtension) that allows us to write JavaScript that looks like HTML
• React operates not directly on the browser’s Document Object Model (DOM) immediately, but on a virtual DOM
• ReactJS follows unidirectional data flow or one-way data binding.

4) List some of the React’s significant benefits.

Some of the major advantages of React are:

1. It increases the application’s performance
2. It can be conveniently used on the client as well as server-side
3. Because of JSX, code’s readability increases
4. Using React, writing UI test cases become extremely easy

5) What are the limitations of React?

Limitations of React are listed below:

1. React is just a library, not a full-blown framework
2. Its library is very large and takes time to understand
3. It can be a little difficult for novice programmers to understand
4. Coding gets complex as it uses inline templating and JSX

6) What is JSX?

JSX is a shorthand for JavaScript XML. This is a file type used by React that uses JavaScript’s expressiveness along with HTML as a template syntax. This makes it very simple to comprehend the HTML file. This file allows robust apps and increases their efficiency. Below is a JSX instance:

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

7) What do you understand by virtual DOM? Explain its working.

A virtual DOM is a lightweight JavaScript object that was originally only the real DOM copy. It is a node tree that lists the components as objects and their characteristics, their characteristics and content. The rendering feature of React generates a node tree from the parts of React. It then updates this tree in reaction to the information model mutations that are caused by different user or system behavior.

8) What are the benefits of using typescript with reactjs?

Below are some of the benefits of using typescript with Reactjs,

1. It is possible to use latest JavaScript features
2. Use of interfaces for complex type definitions
3. IDEs such as VS Code was made for TypeScript
4. Avoid bugs with the ease of readability and Validation

9) What are the features of create react app?

Below are the list of some of the features provided by creating react app.

1. React, JSX, ES6, Typescript and Flow syntax support.
2. Autoprefixed CSS
3. CSS Reset/Normalize
4. A live development server
5. A fast interactive unit test runner with built-in support for coverage reporting
6. A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps
7. An offline-first service worker and a web app manifest, meeting all the Progressive Web App criteria.

10) What are the sources used for introducing hooks?

Hooks got ideas from several different sources. Below are some of them,

1. Previous experiments with functional APIs in the react-future repository
2. Community experiments with render prop APIs such as Reactions Component
3. State variables and state cells in DisplayScript.
4. Subscriptions in Rx.
5. Reducer components in ReasonReact.

11) What is the stable release for hooks support?

React includes a stable implementation of React Hooks in 16.8 release for below packages

1. React DOM
2. React DOM Server
3. React Test Renderer
4. React Shallow Renderer

12) When do you need to use refs?

There are few use cases to go for refs

1. Managing focus, text selection, or media playback.
2. Triggering imperative animations.
3. Integrating with third-party DOM libraries.

13) What is the benefit of strict mode?

They will be helpful in the below cases

1. Identifying components with unsafe lifecycle methods.
2. Warning about legacy string ref API usage.
3. Detecting unexpected side effects.
4. Detecting legacy context API.
5. Warning about deprecated findDOMNode usage

14) What are the methods invoked during error handling?

Below methods are called when there is an error during rendering, in a lifecycle method, or in the constructor of any child component.

1. static getDerivedStateFromError()
2. componentDidCatch()

15) In which scenarios error boundaries do not catch errors?

Below are the cases in which error boundaries doesn’t work

1. Inside Event handlers
2. Asynchronous code using setTimeout or requestAnimationFrame callbacks
3. During Server side rendering
4. When errors thrown in the error boundary code itself

16) Can Redux only be used with React?

Redux can be used as a data store for any UI layer. The most common usage is with React and React Native, but there are bindings available for Angular, Angular 2, Vue, Mithril, and more. Redux simply provides a subscription mechanism which can be used by any other code.

17) 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.

18) What is Redux DevTools?

Redux DevTools is a live-editing time travel environment for Redux with hot reloading, action replay, and customizable UI. If you don’t want to bother with installing Redux DevTools and integrating it into your project, consider using Redux DevTools Extension for Chrome and Firefox.

19) 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. Props get passed to the component similar to function parameters whereas state is managed within the component similar to variables declared within a function.

20) What is JSX?

JSX is a XML-like syntax extension to ECMAScript (the acronym stands for JavaScript XML). Basically it just provides syntactic sugar for the React.createElement() function, giving us expressiveness of JavaScript along with HTML like template syntax.

In the example below text inside <h1> tag return as JavaScript function to the render function.

class App extends React.Component {
  render() {
    return(
      <div>
        <h1>{'Welcome to React world!'}</h1>
      </div>
    )
  }
}