React/Redux

Question 1

Differentiate between the Real DOM and the Virtual DOM

Answer 1

Real DOM:
- Creates a new DOM if an element updates

Virtual DOM:
- The virtual DOM is like a blueprint. It contains all the details needed to construct the DOM, and can be changed easily. Fast because React figures out the difference between the virtual DOM and the real DOM to get the two trees to match

Question 2

What is React?

Answer 2

• React is a front-end JavaScript library
• Follows component-based approach to build reusable UI components

Question 3

Advantages of React

Answer 3

• Uses virtual DOM to increase application performance
• More readable due to JSX

Question 4

Limitations of React

Answer 4

• The library is very large, not only in dependencies but in complexity, takes a long time to master

Question 5

What is JSX?

Answer 5

JSX is a JavaScript syntax extension that allows you to write HTML tags directly in your JavaScript code

Question 6

What is JSX?

Answer 6

JSX is a JavaScript syntax extension that allows you to write HTML tags directly in your JavaScript code

Question 7

Explain how the Virtual DOM works

Answer 7

Whenever there is a change, React compares the virtual DOM to the Real DOM in order to calculate what changes need to be made to the Real DOM, and will update only the things that need to be changed.

Question 8

What are props?

Answer 8

Props are passed down from parent to child components throughout the React app, such as variables/data. (Generally used to render dynamic data).

Question 9

Explain the lifecycle methods of React components

Answer 9

componentDidMount: Executed on client side after first render
componentDidUpdate: Called right after rendering takes place
componentWillUnmount: Called after component is unmounted from the DOM

Question 10

How do lifecycle methods work in React functional components?

Answer 10

The useEffect hook works similarly to the three lifecycle methods: componentDidMount (initial render), componentDidUpdate (dependency array), and componentWillUnmount (cleanup function).

Question 11

Controlled components vs uncontrolled components

Answer 11

Controlled components:
- Do not maintain their own state
- Data is controlled by the parent component
- Take in current values through props and then notify the changes via callbacks

Uncontrolled components:
- Maintain their own state
- Data is controlled by the DOM

Question 12

What is a higher order component?

Answer 12

Higher-order-component (HOC) is a function that takes a component and returns a new component.

Question 13

What can you do with higher order components?

Answer 13

Reuse code, and abstract state away

Question 14

What is the significance of keys in React?

Answer 14

The main purpose of keys is to help React differentiate and distinguish elements from each other. It helps React identify what elements have changed/added/removed.

Question 15

What is Redux?

Answer 15

Redux is a predictable state container for JavaScript applications and is used for managing the application’s state

Question 16

What are the 3 principles that Redux follows?

Answer 16

1. Single source of truth: State of the entire app is stored in an object.
2. State is read-only: The only way to change the state is to trigger an action. An action is a POJO describing the change
3. Changes are made with pure functions: Pure functions are those whose return value depends solely on the values of their arguments.

Question 16

What are the 3 principles that Redux follows?

Answer 16

1. Single source of truth: State of the entire app is stored in an object.
2. State is read-only: The only way to change the state is to trigger an action. An action is a POJO describing the change
3. Changes are made with pure functions: Pure functions are those whose return value depends solely on the values of their arguments.

Question 17

What does single source of truth mean?

Answer 17

In React-Redux applications, when your Redux is a single source of truth, it means that the only way to change your data in UI is to dispatch redux action which will change state within redux reducer. And your React components will watch this reducer and if that reducer changes, then UI will change itself too. But never other way around, because Redux state is single source of truth.

Question 17

What does single source of truth mean?

Answer 17

In React-Redux applications, when your Redux is a single source of truth, it means that the only way to change your data in UI is to dispatch redux action which will change state within redux reducer. And your React components will watch this reducer and if that reducer changes, then UI will change itself too. But never other way around, because Redux state is single source of truth.

Question 18

How does data flow through Redux?

Answer 18

• Follows a unidirectional flow of data.

1. An action is dispatched when a user interacts with the app.
2. The root reducer is called with the current state and the dispatched action.
3. The subscribed components rerender when the store changes

Question 19

What is an action in Redux?

Answer 19

Actions in Redux are an object that have a type property that indicates what type of action is being performed.

Question 20

What is a reducer in Redux?

Answer 20

Reducers are pure functions that specify how the application’s state changes in response to an action. It returns a NEW state.

Question 21

Advantages of Redux?

Answer 21

• Very predictable, as there is one source of truth
• Maintainable, as it is predictable