React Interview Questions and answers

• React uses VirtualDOM instead of RealDOM.RealDOM manipulations are expensive so maintaining a VirtualDOM makes it faster.
• React uses JSX – JavaScript Syntax Extension.JSX stands for Javascript Syntax extension.JSX is a XML-like syntax extension to ECMAScript.JSX is recommended to be used with React to describe what the UI should look like.
• React supports server-side rendering. Server-Side Rendering(SSR) is the ability of a front-end framework to render markup while running on a back-end system.
• React applications can be developed and debugged easily with the help of flexible browser plugins. These plugins help in better analysis and debugging features.
• React applications uses the components to design the views on the pages. React components can be designed to be reusable on multiple pages. This makes the code reusable and helps in faster development also.
• React’s unidirectional data binding keeps everything modular and fast. A unidirectional data flow means, the react views contain the parents and child components within each other. This helps in the design and data flow from parent to child and gives better control to developers on the Views designs.

3. What are the advantages of React?

React have a lot of advantages that make it as one of the most liked Front end library. Let us have a look at these advantages of React:

• Increases the application’s performance with the use of Virtual DOM. This helps in a better GUI experience with very fast page rendering.
• JSX template supports makes it very easy to code.
• React code can be rendered both on the client and server-side (SSR) and this supports SPA (Single Page applications) which makes it a perfect library for universal applications.
• React library is very easy to integrate with many other front-end GUI frameworks since it is a lightweight view library.
• React is easy to write unit and integration test cases with supported tools such as Jest.

4.What are the limitations of React?

Though React has a lot of advantages, but it has some the limitations also. Sometimes these limitations make developers not go with the React library to develop their applications.
Let us have a look at these limitations:

• React is not a full framework. React is just a view library.
• There is a learning curve for beginners as JSX is new to Web development.
• Integrating React into a traditional MVC framework requires some additional configuration.
• The code complexity increases with inline templating and JSX.
• Too many smaller components leading to over-engineering or boilerplate.

5. What is JSX?

JSX stands for Javascript Syntax extension.JSX is a XML-like syntax extension to ECMAScript.JSX is recommended to be used with React to describe what the UI should look like.JSX is a kind of a template language, but it comes with the full power of JavaScript.

JSX produces React “elements”.Below, you can find the basic example of JSX necessary to get you moving with the JSX learning.

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

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

6. Is is mandatory to use JSX for React apps?

NO, The answer is No. JSX is not mandatory to write React applications code.JSX is a convenient template language to write react applications, but it does not mean that react applications can not be developed without JSX.To prove this, let us see an example below where we will write the sample code by using JSX and then the same code we will write without using the JSX. They both work fine and gives us the desired results.

First let us write a greeting example by using the JSX:

class Greeting extends React.Component {
  render() {
    return <div>Hello {this.props.message}</div>;
  }
}

ReactDOM.render(
  <Greeting message="World" />,
  document.getElementById('root')
);

Now let us write the same code without using the JSX:

class Greeting extends React.Component {
  render() {
    return React.createElement('div', null, `Hello ${this.props.message}`);
  }
}

ReactDOM.render(
  React.createElement(Greeting, {message: 'World'}, null),
  document.getElementById('root')
);

7. How does JSX prevents Injection Attacks?

As a web developer, everyone is concerned about the security of the applications. In cybersecurity world, Injection attacks are one of the most common types of attacks that most of the web applications face. With the use of JSX we can prevent this types of attacks on our applications.React DOM escapes any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that’s not explicitly written in your application. Everything is
converted to a string before being rendered.

For example, you can embed user input as below,

const name = response.potentiallyMaliciousInput;
const element = <h1>{name}</h1>;

This way you can prevent XSS(Cross-site-scripting) attacks in the application.Not only security , but when it comes to embedding the components in each other as parent and child components then JSX is very useful.This is reason JSX is a recommended template language for React Applications.

8. Can web browsers understand JSX?

One of the most important information about JSX is that browsers do not understand the JSX language. It means it can not be directly served to a browser. React apps uses a transpiler to convert the JSX code written by developers in to regular Javascript code.Once this code is ready in native javascript then it is eacy for the browsers to render and display the view.Babel is widely used transpiler that is used by most react apps to convert the JSX code to javascript code.

9. What is Virtual DOM?

The Virtual DOM (VDOM) is an in-memory representation of Real DOM. The representation of a UI is
kept in memory and synced with the “real” DOM. It’s a step that happens between the render function
being called and the displaying of elements on the screen. This entire process is called reconciliation.

10. How Virtual DOM works?

The Virtual DOM works in three simple steps.

Whenever any underlying data changes, the entire UI is re-rendered in Virtual DOM representation. Then the difference between the previous DOM representation and the new one is calculated. Once the calculations are done, the real DOM will be updated with only the things that have actually changed.

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

12.What is the difference between Shadow DOM and Virtual DOM?

The Shadow DOM is a browser technology designed primarily for scoping variables and CSS in web components. The Virtual DOM is a concept implemented by libraries in JavaScript on top of browser APIs.