“There is no terror in the bang, only in the anticipation of it.”

— Alfred Hitchcock

Hitchcock

Hitchcock is a debugging tool for React Suspense. It wraps your calls to React.lazy() and react-cache's createResource() and let you pause, delay or invalidate them.

If you like this project consider backing my open source work on Patreon!
And follow @pomber on twitter for updates.

🚨 EXPERIMENTAL 🚨

Use this only for experimenting with the new React API. Hitchcock is inefficient and unstable. Also, I have no idea what I'm doing.

Demos

• Movies: A clone of @karl clone of @dan_abramov demo
• Suspensify: A clone of the suspense demo from Jared Palmer's React Conf talk.

The code is in the examples folder.

Usage

Try it in CodeSandbox

Add the dependency:

$ yarn add hitchcock

Import lazy and createResource from hitchcock (instead of importing them from react/react-cache):

import {
  lazy,
  unstable_createResource as createResource,
  Director
} from "hitchcock";

Also import the Director component, and add it somewhere in your app:

function YourApp() {
  return (
    <Director>
      <YourStuff />
    </Director>
  );
}

Then use lazy and createResource.

Gotchas

• Try to always use the second parameter of createResource.
• I'm doing an ugly hack to get the component name from the lazy() call. Please, create an issue if it shows the wrong name.

Contributing

$ git clone git@github.com:pomber/hitchcock.git
$ cd hitchcock
$ npx lerna bootstrap

Run the examples:

$ yarn start:example movies
$ yarn start:example suspensify

Publish new version:

$ yarn build:packages
$ npx lerna publish

License

Released under MIT license.