Skip to main content

Docs

MAIN CONCEPTS​

ADVANCED GUIDES​

Instead of downloading the entire app before users can use it, code splitting allows you to split your code into small chunks which you can then load on demand.

  • import()

  • React.lazy

  • Error boundaries

  • Route-based code splitting

  • Named Exports

  • Context

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

Context is designed to share data that can be considered "global" for a tree of React components, such as the current authenticated user, theme, or preferred language. For example, we manually thread through a "theme" prop in order to style the Button component

A JavaScript error in a part of the UI shouldn't break the whole app. To solve this problem for React users, React 16 introduces a new concept of an "error boundary".

Error boundaries are React components thatcatch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UIinstead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.

Ref forwarding is a technique for automatically passing a ref through a component to one of its children.

  1. We create a React ref by callingReact.createRefand assign it to arefvariable.

  2. We pass ourrefdown to <FancyButton ref={ref}> by specifying it as a JSX attribute.

  3. React passes therefto the (props, ref) => ... function inside forwardRef as a second argument.

  4. We forward thisrefargument down to <button ref={ref}> by specifying it as a JSX attribute.

  5. When the ref is attached, ref.currentwill point to the <button> DOM node.

Fragments let you group a list of children without adding extra nodes to the DOM

class Columns extends React.Component {
  render() {
    return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    );
  }
}

use <> or <React.Fragment>

Keyed Fragments​

Fragments declared with the explicit <React.Fragment> syntax may have keys. A use case for this is mapping a collection to an array of fragments. For example, to create a description list. keyis the only attribute that can be passed toFragment.

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

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

A typical use case for portals is when a parent component has anoverflow: hiddenorz-indexstyle, but you need the child to visually "break out" of its container. For example, dialogs, hovercards, and tooltips.

TheProfilermeasures how often a React application renders and what the "cost" of rendering is. Its purpose is to help identify parts of an application that are slow and may benefit from optimizations such as memoization.

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

https://medium.com/@mjackson/use-a-render-prop-50de598f11ce

API REFERENCE​

TESTING​

https://reactjs.org/docs/concurrent-mode-suspense.html

React 16.6 added a <Suspense> component that lets you "wait" for some code to load and declaratively specify a loading state (like a spinner) while we're waiting

https://reactjs.org/docs/concurrent-mode-patterns.html

https://reactjs.org/docs/concurrent-mode-adoption.html

https://reactjs.org/docs/getting-started.html

https://reactjs.org/tutorial/tutorial.html