React Misc

Question 1

List some of the advantages of using React

Answer 1

React is a project from Facebook that handles a very specific concern, creating components. Because of this focus, React is lightweight. This makes it easy to create complex UIs by composing many simple components together. Since React is so focused on this one goal, it can even be used along with other frameworks.

Question 2

What makes React so fast and responsive?

Answer 2

React can scale to extremely large and complex UIs because it’s very efficient about how and when it manipulates the DOM. React is designed to help eliminate layout trash by using a virtual DOM behind the scenes.

Question 3

React components are isomorphic friendly. What does this mean?

Answer 3

Components that can be rendered on both the client and the server. React doesn’t need the DOM in order to render. Isomorphic rendering can increase perceived loading performance, it avoids repeating code on the client and the server, and it offers a simple path to search engine optimization.

Question 4

What is a mock API and why use it?

Answer 4

A mock API simulates making async calls to a server. This pattern allows you to start development immediately even if the APIs that you need to consume haven’t been created yet. Hitting mock data is the fastest way to handle rapid development because you can count on all responses being instantaneous.

Question 5

npm package: npm-run-all

Answer 5

A package that allows us to run multiple scripts at the same time.
It provides a command called run-p. Run-p stands for run parallel. We provide this command with a list of scripts that we’d like to run at the same time.

Question 6

What is Fetch?

Answer 6

It is used for making API calls. Fetch is built into modern browsers, so we can make API calls without installing an extra library. Fetch has a promise-based API.

Question 7

npm package: cross-env

Answer 7

This is a package from npm that allows us to set environment variables in a cross- platform friendly way.

Question 8

What is React context?

Answer 8

The Context API was released with React version 16.3 in 2018. It allows for an easy way to share common data and events across multiple components at different levels of a component hierarchy.

Question 9

How do you create and use React context?

Answer 9

The idea is that you create a special object, which is a React context, and that gives you a special component known as a context provider that you can use to wrap any section of your app.

The context provider can wrap your full app or just some part of it. Once you’ve done that, all the children components, no matter how many levels nested deep, get easy access to that context by simply importing it and getting the value associated with the context using the useContext React hook.

Question 10

Can you use React context to manage state?

Answer 10

Yes. Since the context value can contain state, you can take advantage of the React lifecycle events, like useEffect, to change that context‑associated state, and the new state values will automatically propagate through your app, and your React app will react to those changes and render the appropriate display.

Question 11

What does “memoizing a component” mean?

Answer 11

Memoizing a component prevents rerendering because it causes React to check to see if any of the incoming properties changed. And if not, it returns a cached version of the component.

We do that by instead of returning the component directly, we call React.memo, which takes as a parameter the component and returns a memoized version of it.

Question 12

Error Boundaries

Answer 12

React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI.

Question 13

What is “optimistic UI”

Answer 13

It’s when a user performs some action and the interface updates with the expected result even though the back‑end processing may still be pending.

Question 14

What is React?

Answer 14

React is a JavaScript library for building user interfaces. It’s not a framework, it is a small library that focuses on just one thing, enabling developers to declaratively describe their user interfaces and model the state of these interfaces.

Question 15

What is a user interface?

Answer 15

A user interface is anything we put in front of users to have them interact with a machine.

Question 16

What means “that React is declarative”?

Answer 16

We describe user interfaces with React and tell it what we want, not how to do it. React will take care of the how and translate our declarative descriptions, which we write in the React language to actual user interfaces in the browser.

Question 17

What are the three fundamental concepts in React?

Answer 17

1. Components - they receive certain input objects, and they output a description of a user interface (like functions)
2. Reactive updates - when the state of a React component, the input, changes, the user interface it represents, the output, changes as well
3. Virtual representation of views in memory (the virtual DOM) - React uses the virtual DOM to compare versions of the UI in memory before it acts on them.

Question 18

What types of React components are there?

Answer 18

A React component can be one of two types. It can be either a function component or a class component. Both types can be stateful and have side effects, or they can be purely presentational.

Question 19

Give example of how to use React events (onClick)

Answer 19

React events, just like DOM events, are defined as attributes but they are case sensitive and must use camelCase.

Unlike the DOM version of the onClick, which receives a string, this react onClick attribute receives a function reference. We do not invoke the function, we just need to pass in the pointer to the function or define it inline.

Question 20

What is React.Fragment?

Answer 20

It’s used when you need to enclose multiple elements without introducing a new parent. The shortcut version is an empty tag (<»).

Question 21

A component cannot return multiple elements and must always wrap them in a parent element. Why?

Answer 21

Because each one of these elements get translated into a function call (React.createElement()), starting with the first and going over its children.

Question 22

What is “props”?

Answer 22

It’s an object that contains all the attributes passed to a component. All components receive it as an argument , even if they don’t have any attributes. The name “props” is a convention.

Question 23

React components have “one‑way flow of data”, what does it mean?

Answer 23

Parent components can flow their data and behavior down to children components through props.

A component can’t change the state of its parent but the parent can pass properties to its child component. Those properties can be simple primitive values or function references, which can be used by the child to change the parent’s state.

Question 24

The Diffing Algorithm, how does it work?

Answer 24

It only regenerates in its DOM node what actually needs to be regenerated, while it keeps everything else the same.

This diffing process is possible because of React’s virtual DOM and the fact that it has a representation of the user interface in memory because it’s written in JavaScript.

Question 25

What kinds of input a component may have?

Answer 25

The input for a component is a set of properties you can access inside the component with its first argument object, which is usually named props, and also a set of state elements that a component can hook into with the special useState function.

Question 26

What is the syntax to mount a React component in the browser?

Answer 26

The syntax to mount a React component in the browser is ReactDOM.render, and that takes two arguments, the component to render and the HTML element to hold the React‑rendered markup.

Question 27

What is the main difference between a component’s state and properties?

Answer 27

A component state can be changed inside that component, and every time a component changes its state, React rerenders it.

The props of a component cannot be changed by the component, but the whole component can be rerendered with different props by the component’s parent.

Question 28

What are the minimum requirements for a class component?

Answer 28

A class component must extend a special class in React, the React.Component class and must have a render function which returns JSX.

A class can have as many functions as needed, but the render function in a React component is the only function that’s required. You make the render function return the virtual DOM description of your component.

Question 29

What is the style property in JSX and how does it work?

Answer 29

React style property looks like the CSS inline style but it accepts a JavaScript object. It’s camel case for property names and it’s strings for values.

JavaScript styles are excellent for conditional styling. Instead of using different class names based on a certain condition, with JavaScript styles, you can just output different objects.

Question 30

What is a controlled component?

Answer 30

A component in which React controls the value of an input element directly through React itself, rather than reading it from the DOM elements.

Question 31

Why do we need to specify a key property to dynamic list elements?

Answer 31

When we render a dynamic list we need to provide a unique key property for each element so that React can use it to identify the element.

If we don’t specify some kind of identity for this dynamic element, then React will just assume that the position of the element is its identity, and that might cause problems if we start re‑ordering those elements.