Basics

Question 1

What is “state”?

Answer 1

All internal data that defines an application at a given point in time

Question 2

What is React’s approach to reactive UI rendering?

Answer 2

You declare how state is represented as visual elements of the DOM.

From then on, React automatically updates the DOM to reflect state changes.

Question 3

What is React’s ‘raison d’etre’?

Answer 3

Reduce the complexity of creating/maintaining UIs

Question 4

What are components?

Answer 4

Self-contained, concern-specific building blocks that are easy to reuse, extend and maintain.

Question 5

Give 3 reasons why JSX is great for user interfaces?

Answer 5

1) it’s declarative
2) it’s easy to spot the relationship between elements
3) it’s easy to visualize the overall structure of your UI

Question 6

What does SPA stand for?

Answer 6

Single Page Application

Question 7

What are SPAs constantly doing?

Answer 7

1) Fetching new data

2) Transforming parts of the DOM as the user interacts through the UI

Question 8

What does DOM stand for?

Answer 8

Document Object Model

Question 9

What happens when interfaces grow more complex?

Answer 9

Becomes difficult to:

1) Examine the current state of the application
2) Make the necessary changes on the DOM to update it

Question 10

What technique do other JS frameworks use to keep the interface in sync with state?

Answer 10

Data binding

Question 11

For performance reasons, it’s not viable to trash and re-render the entire interface every time state changes.
What is React’s solution to this?

Answer 11

The ‘Virtual DOM’ :

An in-memory, lightweight representation of the DOM

Question 12

When to use a Class Component over a Function Component?

Answer 12

Class components

• the render() method will be called, whenever the state of the components changes.
• should be preferred whenever we have the requirement with the state of the component.

Functional components

• render the UI based on the props
• no render() method

Question 13

What are props in React?

Answer 13

• Inputs to components
• They pass custom data to your component
• They trigger state changes

Question 14

Why should we not update the state directly?

Answer 14

• If you try to do it directly, it won’t re-render the component
• use setState() method, it schedules an update to components state object which triggers the component to re-render

Question 15

How to pass a parameter to an event handler or callback?

Answer 15

You can use an arrow function to wrap around an event handler and pass parameters:

this.handleClick(id)} />

This is an equivalent to calling .bind:

Apart from these two approaches, you can also pass arguments to a function which is defined as arrow function

handleClick = (id) => () => {
console.log(“Hello, your ticket number is”, id)
};

Question 16

What are synthetic events in React?

Answer 16

• a cross-browser wrapper around the browser’s native event.
• It’s API is same as the browser’s native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers.

Question 17

What is “key” prop and what is the benefit of using it in arrays of elements?

Answer 17

A key is a special string attribute you should include when creating arrays of elements. Key prop helps React identify which items have changed, are added, or are removed.

Question 18

How does the Virtual Dom work?

Answer 18

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.