/AsyncCompApp

Example of async components in React

Primary LanguageJavaScript

Async-Comp-App

Example of async components in React.

Tech

  • React
  • React Router

How to use asyncComponent hoc

const AsyncHello = asyncComponent({
  importComponent: () => import("./components/Hello"),
  loader: <Spinner />,
  errorFallback: <Error />,
  timeWithoutLoader: 200, // in ms / OPTIONAL(default 300) - when the component load faster then provided value loader won't be use
});

Preloading component

const Header = () => (
  <ul>
    <li>
      <Link to="/">Home</Link>
    </li>
    <li>
      <Link to="/hello" onMouseOver={AsyncHello.preloadComponent}>Hello</Link>
    </li>
  </ul>
);

Setup

$ npm install
$ npm start

This project was bootstrapped with Create React App.