React Trivia

Question 1

Differentiate between real DOM and virtual DOM

Answer 1

Real:
Updates slowly, directly updates HTML, creates new DOM if element updates
DOM manipulation is very expensive
Too much of memory wastage

Virtual DOM:
Updates faster, can’t directly update HTML, updates JSX if element updates, DOM manipulation is very easy, no memory wastage

Question 2

What is React?

Answer 2

Front-end JavaScript library developed by Facebook 2011
Follows component based approach helping in building reusable UI components
Used to develop complex and interactive web and mobile UI
Open sourced only in 2015, but has one of the largest communities supporting it

Question 3

What are the major features of React?

Answer 3

Uses virtual DOM instead of real DOM
Uses server-side rendering
Follows uni-directional data flow or data binding

Question 4

List some major advantages of React

Answer 4

Increases application performance
Can be conveniently used on client as well as server side
Because of JSX, code readability increases
Easy to integrate with other frameworks (Meteor, Angular, etc.)
Writing UI test cases become extremely easy

Question 5

Limitations of React

Answer 5

It’s just a library, not full-blown framework
Very large library that takes time to understand
Can be difficult for novice programmers to understand
Coding gets complex as it uses inline templating and JSX

Question 6

What is JSX?

Answer 6

Stands for: JavaScript XML
type of file used by React which utilizes expressiveness of JavaScript along with HTML like template syntax.
Makes applications robust and boosts performance

Question 7

What do you understand by virtual DOM? Explain its works

Answer 7

Lightweight JavaScript object which originally is just a copy of the real DOM
It is a node tree that lists the elements, their attributes and content as Objects and their properties.
React’s render function creates a node tree out of the React components. Then updates the tree in response to mutations in the data model caused by various actions done by the user or the system.
Virtual DOM works in 3 simple steps:
1. Whenever any underlying data changes, the entire UI is re-rendered in Virtual DOM representation.
2. Then the difference between the previous DOM representation and the new one is calculated.
3. 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

Browsers can only read JavaScript objects but JSX is not a regular JS object. To enable a browser to read JSX, we need to transform the JSX file into a JavaScript object using JSX transformers like Babel and then pass it to the browser.

Question 9

How different is React’s ES6 syntax when compared to ES5?

Answer 9

require vs import
exports vs export default
component and function
how props are received
how state is set

Question 10

How is React different from Angular?

Answer 10

Architecture
React: Only view of MVC
Angular: Complete MVC

Rendering:
React: Server-side rendering
Angular: Client-side rendering

DOM:
React: virtual
Angular: real

Data Binding:
React: One-way data binding
Angular: Two-way data binding

Debugging
React: Compile time debugging
Angular: Runtime debugging

Author:
React: Facebook
Angular: Google

Question 11

“In React, everything is a component.” Explain.

Answer 11

Components are building blocks of a React application’s UI. These components split up the entire UI into small independent and reusable pieces. Then it renders each of these components independent of each other without affecting the rest of the UI.

Question 12

What is the purpose of render() in React?

Answer 12

Every React component must have a render() mandatorily.
It returns a single React element which is the representation of the native DOM component. If more than one HTML element needs to be rendered, then they must be grouped together inside one enclosing tag. This function must be kept pure; it must return the same result each time it is invoked.

Question 13

How can you embed two or more components into one?

Answer 13

Pass in one of the components into the other as an HTML tag part of the render function

Question 14

What is props?

Answer 14

Shorthand for properties in React
Read-only components which are immutable
Always passed down from parent to child components throughout the application
A child component can never send a prop back to the parent component.

Question 15

What is state in React and how is it used?

Answer 15

Source of data and must be kept as simple as possible.
Objects which determine components rendering and behavior. Mutable unlike props and create dynamic and interactive components

Question 16

Difference between state and props

Answer 16

Receive initial value from parent component: S P
Parent component can change value: P
Set default values inside component: S P
Changes inside component: S
Set initial value for child components: S P
Changes inside child components: P

Question 17

How can you update the state of a component?

Answer 17

class component: this.setState()
functional component:  react hooks useState