async-react-future - import * from './future' today!

A compilation of everything everyone is doing with Async React, for easy demoing and experimentation.

WARNING: THIS IS NOT TO BE USED FOR PRODUCTION

This library helps people experiment with Async React as explored by the community.

See it in action

Simple movie demo clone - no Suspense, no react-loadable

Movie demo clone - no Suspense, with react-loadable

Full movie demo clone - with Suspense

Install

npm install --save async-react-future

API Documentation

Note: all of the below must be used inside ReactDOM's coming <AsyncMode>.

./future

Dan Movie Demo Components

Placeholder component from Dan's demo

This is a simple wrapper for Timeout; frankly if you know Timeout well you don't have to use this.

You want one of these above any suspending you're going to do.

Props

const {
  delayMs = 1, // note that react has hardcorded expirations at 1s and 5s
  fallback = 'Loading', // any jsx here will do
  children // required
} = props;

Usage Example

import { future: { Placeholder } } from 'async-react-future';

// later...
 <Placeholder delayMs={1000} fallback={<div className="Spinner" />}>
   {/* stuff with suspenders in here */}
 </Placeholder>

new React.Component from Dan's demo

Just adds deferSetState to React.Component, which passes things through ReactDom.deferredUpdates before setting component state

Props

N/A

Usage Example

import { future: { Component } } from 'async-react-future';

class App extends Component {
  state = { showDetail: false };
  handleClick = id => {
    this.deferSetState({ showDetail: true });
  };
  render() {
    // use this.handleClick somewhere
  }
}

Img component from Dan's demo

Suspends image fetching. pretty much.

Props

const {
  src, // required
  alt = '', // probably required
  ...rest
} = props;

Usage Example

import { future: { Img } } from 'async-react-future';

// later
<Img src={src} alt="poster" />

Misc components

Never component from Suspense test

Throws a promise that resolves after some arbitrarily large number of seconds. The idea is that this component will never resolve. It's always wrapped by a Timeout.

Source: https://github.com/acdlite/react/blob/7166ce6d9b7973ddd5e06be9effdfaaeeff57ed6/packages/react-reconciler/src/tests/ReactSuspense-test.js#L558

Props

N/A

Usage Example

import { future: { Never } } from 'async-react-future';

function Delay({ms}) {
  return (
    <Timeout ms={ms}>
      {didTimeout => {
        if (didTimeout) {
          // Once ms has elapsed, render null. This allows the rest of the
          // tree to resume rendering.
          return null;
        }
        return <Never />;
      }}
    </Timeout>
  );
}

Delay component from Suspense test

Delay a render of peer components by ms milliseconds. Can be used to debounce, for example. Once ms has elapsed, render null. This allows the rest of the tree to resume rendering.

Source: https://github.com/acdlite/react/blob/7166ce6d9b7973ddd5e06be9effdfaaeeff57ed6/packages/react-reconciler/src/tests/ReactSuspense-test.js#L558

Props

N/A

Usage Example

import React, {Fragment} from 'react';
import { future: { Delay } } from 'async-react-future';

function DebouncedText({text, ms}) {
  return (
    <Fragment>
      <Delay ms={ms} />
      <Text text={text} />  {/* defined elsewhere */}
    </Fragment>
  );
}

LowPriority component from Peggy's ReactEurope demo

Defers (makes low priority) prop changes to its children through manipulating a value prop on a stateKey. from https://github.com/peggyrayzis/react-europe-apollo

Props

const {
  stateKey, // required, string
  value, // required, any
  children // function as a child, gets the deferred props passed to LowPriority
} = this.props;

Usage Example

import { future: { LowPriority } } from 'async-react-future';
import React, {Timeout} from 'react'

// later
<LowPriority
  stateKey="selectedDog"
  value={this.state.selectedDog}> {/* not deferred */}
  {selectedDog => ( // deferred
    <Timeout ms={2000}>
      {expired =>
        expired && selectedDog ? (
          <Loading /> {/* defined elsewhere */}
        ) : (
          <Photo breed={selectedDog} /> {/* defined elsewhere */}
        )
      }
    </Timeout>
  )}
</LowPriority>

./mockapi

Raw movie data to make demo clones

• moviesOverview (array of movie objects)
• movieDetailsJSON (an object map of movie id: movie detail object)
• movieReviewsJSON (an object map of movie id: movie review object)

Usage Example

import {
  mockapi: { moviesOverview },
  movieDemo: { MovieListPage}
  } from 'async-react-future';

// later
<MovieListPage
  onMovieClick={handleMovieClick}  {/* defined elsewhere */}
  loadingId={currentId}  {/* defined elsewhere */}
  moviesOverview={moviesOverview}
/>

Async wrappers with delays for the raw data

• fetchMovieList
• fetchMovieDetails
• fetchMovieReviews

Usage Example

import {
  future: { createFetcher },
  mockapi: { fetchMofetchMovieReviewsvieList },
  movieDemo: { MovieListPage}
  } from 'async-react-future';

const movieReviewsFetcher = createFetcher(fetchMovieReviews);

function MovieReviews({ movieId }) {
  const reviews = movieReviewsFetcher.read(movieId);
  return <div className="MovieReviews">{reviews.map(review => <div key={review}>{review}</div>)}</div>;
}

Just a delay function for now

Usage Example

export const fetchMovieDetails = async (id, delayMS = 100) => {
  await delay(delayMS);
  return movieDetailsJSON[id];
};

./movieDemo

Styled components that help to rapidly recreate demo clones and minimize code people have to dig through.

Pages

A MovieListPage

A MovieListPage

Usage Example

import {
  mockapi: { moviesOverview },
  movieDemo: { MovieListPage}
  } from 'async-react-future';

// later
<MovieListPage
  onMovieClick={handleMovieClick}  {/* defined elsewhere */}
  loadingId={currentId}  {/* defined elsewhere */}
  moviesOverview={moviesOverview}
/>

The rest of this documentation is yet to be completed.

Utilities

A simple Spinner

A simple css spinner that always spins, pass size={'large'} for 2x size

Usage Example

import {
  future: { Placeholder }
  movieDemo: { Spinner }
  } from 'async-react-future';

// later...
 <Placeholder delayMs={1000} fallback={<Spinner />}>
   {/* stuff with suspenders in here */}
 </Placeholder>

Attribution

I have studied a lot of people's code and you are likely to see shades of your code pop up here and there. I don't claim any rights at all to any of this. I'll try to attribute as many people as possible but apologies in advance if I forgot to include you.

• https://github.com/BenoitZugmeyer/react-suspense-demo for much of the ./future API
• https://medium.com/@pete_gleeson/creating-suspense-in-react-16-2-dcf4cb1a683f for Loading
• https://github.com/pomber/hitchcock/blob/master/src/cache.js for cache

Library was bootstrapped with: https://github.com/transitive-bullshit/create-react-library

License

MIT © sw-yx