React Misc Flashcards
List some of the advantages of using React
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.
What makes React so fast and responsive?
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.
React components are isomorphic friendly. What does this mean?
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.
What is a mock API and why use it?
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.
npm package: npm-run-all
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.
What is Fetch?
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.
npm package: cross-env
This is a package from npm that allows us to set environment variables in a cross- platform friendly way.
What is React context?
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.
How do you create and use React context?
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.
Can you use React context to manage state?
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.
What does “memoizing a component” mean?
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.
Error Boundaries
React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI.
What is “optimistic UI”
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.
What is React?
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.
What is a user interface?
A user interface is anything we put in front of users to have them interact with a machine.
What means “that React is declarative”?
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.
What are the three fundamental concepts in React?
- Components - they receive certain input objects, and they output a description of a user interface (like functions)
- Reactive updates - when the state of a React component, the input, changes, the user interface it represents, the output, changes as well
- 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.
What types of React components are there?
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.
Give example of how to use React events (onClick)
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.
What is React.Fragment?
It’s used when you need to enclose multiple elements without introducing a new parent. The shortcut version is an empty tag (<»).
A component cannot return multiple elements and must always wrap them in a parent element. Why?
Because each one of these elements get translated into a function call (React.createElement()), starting with the first and going over its children.
What is “props”?
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.
React components have “one‑way flow of data”, what does it mean?
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.
The Diffing Algorithm, how does it work?
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.
What kinds of input a component may have?
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.
What is the syntax to mount a React component in the browser?
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.
What is the main difference between a component’s state and properties?
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.
What are the minimum requirements for a class component?
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.
What is the style property in JSX and how does it work?
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.
What is a controlled component?
A component in which React controls the value of an input element directly through React itself, rather than reading it from the DOM elements.
Why do we need to specify a key property to dynamic list elements?
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.
