React 19 use hook shim
While waiting for React 19, I still want to release a library that depends on React 19 use hook. Hense, this shim.
It also provides useMemo + use(Context) experimental feature, which we hope to have in React 19. (See: https://x.com/TkDodo/status/1741193371283026422 )
npm install react18-useIt works both in React 18 and React 19. However, you don't need it if you are using React 19.
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>
);
};It works both in React 18 and React 19.
import { useState } from 'react';
import type { ReactNode } from 'react';
import { createContext, use, useMemo } from 'react18-use';
const MyContext = createContext({ foo: '', count: 0 });
const Component = () => {
const foo = useMemo(() => {
const { foo } = use(MyContext);
return foo;
}, []);
return (
<p>
Foo: {foo} ({Math.random()})
</p>
);
};
const MyProvider = ({ children }: { children: ReactNode }) => {
const [count, setCount] = useState(1);
return (
<div>
<button onClick={() => setCount((c) => c + 1)}>{count}</button>
<MyContext.Provider value={{ foo: 'React', count }}>
{children}
</MyContext.Provider>
</div>
);
};
const App = () => (
<MyProvider>
<Component />
</MyProvider>
);- Only supports promises and contexts.
- It might not work exactly the same as React 19.
- useMemo with use(Context) is experimental (feedback welcome).
The examples folder contains working examples. You can run one of them with
PORT=8080 pnpm run examples:01_counterand open http://localhost:8080 in your web browser.