React

Question 1

React’s Virtual DOM

Answer 1

React’s virtual DOM implies a “virtual” representation (as a tree, as each element is a node that holds an object ) of a user interface, which is preserved in memory and synchronized with the browser’s DOM via React’s ReactDOM library.

Question 2

What is DOM?

Answer 2

When a webpage is loaded into a browser, the browser typically receives an HTML document for that page from the server. The browser constructs a logical, tree-like structure from the HTML to show the requested page to the client. The DOM refers to this tree structure.

The Document Object Model (DOM) is a logical tree that describes a document. Each tree branch terminates in a node, which holds an object. Because the document on the browser has been parsed to a tree structure, methods that offer programmatic access to the tree, allowing one to change the structure, style, or content of a document, are required. This gave rise to the DOM API, which provides these methods for altering the elements represented as nodes in the tree.

Question 3

What is JSX?

Answer 3

JSX is a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file.

Question 4

constructor()

Answer 4

The constructor() method is called when the component is first created. You use it to initialize the component’s state and bind methods to the component’s instance

Question 5

render()

Answer 5

The render() method is responsible for generating the component’s virtual DOM representation based on its current props and state. It is called every time the component needs to be re-rendered, either because its props or state have changed, or because a parent component has been re-rendered.

Question 6

getDerivedStateFromProps()

Answer 6

getDerivedStateFromProps() is a lifecycle method available in React 16.3 and later versions that is invoked during the mounting and updating phase of a component.

During the mounting phase, getDerivedStateFromProps() is called after the constructor and before render(). This method is called for every render cycle and provides an opportunity to update the component’s state based on changes in props before the initial render.

Question 7

componentDidMount()

Answer 7

The componentDidMount() method is called once the component has been mounted into the DOM. It is typically used to set up any necessary event listeners or timers, perform any necessary API calls or data fetching, and perform other initialization tasks that require access to the browser’s DOM API.

Question 8

shouldComponentUpdate()

Answer 8

The shouldComponentUpdate() method is called before a component is updated. It takes two arguments: nextProps and nextState. This method returns a boolean value that determines whether the component should update or not. If this method returns true, the component will update, and if it returns false, the component will not update.

Question 9

componentWillUpdate()

Answer 9

componentWillUpdate() is a lifecycle method in React that gets called just before a component’s update cycle starts. It receives the next prop and state as arguments and allows you to perform any necessary actions before the component updates.

Question 10

componentDidUpdate()

Answer 10

The componentDidUpdate() method is a lifecycle method in React that is called after a component has been updated and re-rendered. It is useful for performing side effects or additional operations when the component’s props or state have changed.

Question 11

getSnapshotBeforeUpdate()

Answer 11

The getSnapshotBeforeUpdate() method is called just before the component’s UI is updated. It allows the component to capture some information about the current state of the UI, such as the scroll position before it changes. This method returns a value that is passed as the third parameter to the componentDidUpdate() method.

Question 12

componentWillUnmount()

Answer 12

During the unmounting phase, React calls the following lifecycle methods in order:

componentWillUnmount(): This method is called just before the component is removed from the DOM. It allows you to perform any necessary cleanup, such as canceling timers, removing event listeners, or clearing any data structures that were set up during the mounting phase.
After componentWillUnmount() is called, the component is removed from the DOM and all of its state and props are destroyed.

Question 13

What is the state in React?

Answer 13

State is a fundamental concept in React that allows you to store and manage data that can change over time. It represents the current state of a component and influences what is displayed on the user interface. State is essential for building dynamic and interactive web applications.

Question 14

What are Props in React?

Answer 14

Props, short for properties, are a way to pass data from a parent component to a child component. They are read-only and help make your React components reusable and composable.

Question 15

Composition x Inheritance

Answer 15

It is recommended to always use composition instead of inheritance

Question 16

Container/Presentational

Answer 16

The Container/Presentational pattern, also known as the Container/View pattern or the Smart/Dumb pattern, is a design pattern commonly used in React applications. It aims to separate the responsibilities of managing state and data from the UI rendering logic.

Question 17

higher-order component (HOC’s)

Answer 17

A higher-order component (HOC) is an advanced technique in React for reusing component logic.
Concretely, a higher-order component is a function that takes a component and returns a new component.

Whereas a component transforms props into UI, a higher-order component transforms a component into another component.

Question 18

Render props

Answer 18

The term “render prop” refers to a technique for sharing code between React components using a prop whose value is a function.

Question 19

Custom Hooks

Question 20

Context

Answer 20

Context lets the parent component make some information available to any component in the tree below it—no matter how deep—without passing it explicitly through props.

Question 21

What is immutability and why it is important in React?

Answer 21

Immutable data is a concept derived from functional programming. In simple terms, an immutable object is an object that, once created, cannot be changed. In the context of JavaScript and React, this means we create new versions of our state or props whenever we want to make changes, rather than modifying existing objects.

The primary advantage of immutability within React lies in the reconciliation process – React’s way of updating the DOM efficiently. By comparing the previous state and the new state, React determines what changes are necessary.

Question 22

What is memoization in React?

Answer 22

Memoization is an optimization technique for accelerating computer programs by caching the results of heavy function calls and returning them when similar inputs are encountered repeatedly. Simply, React memoization is similar to caching.