react18-use

React 19 use hook shim

Motivation

While waiting for React 19, I still want to release a library that depends on React 19 use hook. Hense, this shim.

Install

npm install react18-use

Usage

import { Suspense, useState } from 'react';
import { use } from 'react18-use';

const Counter = ({ countPromise }: { countPromise: Promise<number> }) => {
  const count = use(countPromise);
  return <p>Count: {count}</p>;
};

const App = () => {
  const [countPromise, setCountPromise] = useState(Promise.resolve(0));
  return (
    <div>
      <button
        onClick={() =>
          setCountPromise(async (prev) => {
            await new Promise((resolve) => setTimeout(resolve, 1000));
            return (await prev) + 1;
          })
        }
      >
        +1
      </button>
      <Suspense fallback={<p>Loading...</p>}>
        <Counter countPromise={countPromise} />
      </Suspense>
    </div>
  );
};

Limitations

• Only supports promises and contexts.
• It might not work the same as React 19.
• useMemo with use(Context) is highly experimental and not for production.

Examples

The examples folder contains working examples. You can run one of them with

PORT=8080 pnpm run examples:01_counter

and open http://localhost:8080 in your web browser.

You can also try them directly: 01 02

Tweets

• https://x.com/dai_shi/status/1823896762542928373
• https://x.com/dai_shi/status/1824424680721354980