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.
