General React Questions

Question 1

Differentiate between Real DOM and Virtual DOM.

Answer 1

Real Dom

1. It updates slow.
2. Can directly update HTML.
3. Creates a new DOM if element updates.
4. DOM manipulation is very expensive.
5. Too much of memory wastage.

Virtual Dom

1. It updates faster.
2. Can’t directly update HTML.
3. Updates the JSX if element updates.
4. DOM manipulation is very easy.
5. No memory wastage.

Question 2

What is React?

Answer 2

1. React is a front-end JavaScript library developed by Facebook in 2011.
2. It follows the component based approach which helps in building reusable UI components.
3. It is used for developing complex and interactive web and mobile UI.
4. Even though it was open-sourced only in 2015, it has one of the largest communities supporting it.

Question 3

What are the features of React?

Answer 3

1. It uses the virtual DOM instead of the real DOM.
2. It uses server-side rendering.
3. It follows uni-directional data flow or data binding.

Question 4

List some of the major advantages of React.

Answer 4

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. React is easy to integrate with other frameworks like Meteor, Angular, etc
5. Using React, writing UI test cases become extremely easy

Question 5

What are the limitations of React?

Answer 5

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 little difficult for the novice programmers to understand
4. Coding gets complex as it uses inline templating and JSX

Question 6

What is JSX?

Answer 6

1. shorthand for JavaScript XML
2. type of file used by React which utilizes the expressiveness of JavaScript along with HTML like template syntax
3. makes applications robust and boosts its performance

Question 7

What do you understand by Virtual DOM? Explain its working.

Answer 7

1. Virtual DOM is a lightweight JavaScript object which originally is just the copy of the real DOM
2. It is a node tree that lists the elements, their attributes and content as Objects and their properties
3. React’s render function creates a node tree out of the React components
4. React updates this tree in response to the mutations in the data model which is caused by various actions done by the user or by the system.
5. Whenever any underlying data changes, the entire UI is re-rendered in Virtual DOM representation.
6. Then the difference between the previous DOM representation and the new one is calculated.
7. Once the calculations are done, the real DOM will be updated with only the things that have actually changed.

Question 8

Why can’t browsers read JSX?

Answer 8

1. Browsers can only read JavaScript objects but JSX in not a regular JavaScript object.
2. Thus to enable a browser to read JSX, first, we need to transform JSX file into a JavaScript object using JSX transformers like Babel and then pass it to the browser.

Question 9

Components

Answer 9

Reusable pieces of the application UI that has inner dynamic functionality and state.

Question 10

Classes

Answer 10

Interfaces of properties and methods that will be assigned to object instances.

Question 11

Inheritance

Answer 11

The extension of existing properties and methods from a parent class to a subclass. The subclass extends the parent class to inherit the base parent class’s methods and properties.

Question 12

State

Answer 12

The internal data of a React component. The state can be updated through interactions with the component during the application.

Question 13

SetState

Answer 13

The official way to update state in a React component. It is a react rule to not modify the state directly. Instead, provide new values for keys in the state, using the setState() method. The setState() method recalls the render method when complete, giving the component the chance to reflect changes in the UI.

Question 14

.bind

Answer 14

A JavaScript method that passes the this object down from a component to a helper methods. Crucial for components to pass down the this.setState() method to helper methods.

Question 15

Class Properties and Initializers

Answer 15

An alternative syntax for declaring the state and within components that automatically binds the this object.

Question 16

Props

Answer 16

Data passed down to the React component from the parent.

Question 17

Bundling

Answer 17

The packaging of multiple JavaScript files and their dependencies into one giant file that the HTML can refer to.

Question 18

DOM

Answer 18

The Document Object Model for the web application. The document object, provided to the JavaScript, allows methods to update the UI.

Question 19

React’s Virtual DOM

Answer 19

An internal virtual representation of the DOM, that is much lighter weight, which allows React to efficiently compute updates using the document API.

Question 20

Lifecycle Methods

Answer 20

Method that fires in different phases in the React component. Most have to do with the component’s relationship with the document.

Question 21

componentDidMount

Answer 21

fires when the component appears in (mounts to) the DOM

Question 22

componentWillUnmount

Answer 22

fires when the component is about to leave (unmount from) the DOM.

Question 23

Fetch

Answer 23

Implemented as a JavaScript promise, this method can make HTTP requests to grab data.

Question 24

Stateless Functional Components

Answer 24

An alternative cleaner syntax to create React components based on returning JSX from a function.

Question 25

React Router

Answer 25

A technology which can turn a single-page app into one with multiple pages of content based on paths.

Question 26

Higher Order Components

Answer 26

Components that take other components as inputs, to return an entirely new component. They are like functions which have component inputs, and output a new customized component, based on that component input.