React 19 use hook shim
npm install react18-use
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 )
``bash`
npm install react18-use
It works both in React 18 and React 19. However, you don't need it if you are using React 19.
`tsx
import { Suspense, useState } from 'react';
import { use } from 'react18-use';
const Counter = ({ countPromise }: { countPromise: Promise Count: {count}
const count = use(countPromise);
return
};
const App = () => {
const [countPromise, setCountPromise] = useState(Promise.resolve(0));
return (
$3
It works both in React 18 and React 19.
tsx
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 (
Foo: {foo} ({Math.random()})
);
};const MyProvider = ({ children }: { children: ReactNode }) => {
const [count, setCount] = useState(1);
return (
{children}
);
};const App = () => (
);
`Limitations
- Only supports promises and contexts.
- It might not work exactly the same as React 19.
- useMemo with use(Context) is experimental (feedback welcome).
Examples
The examples folder contains working examples.
You can run one of them with
bash
PORT=8080 pnpm run examples:01_counter
``and open
You can also try them directly:
01
02
- https://x.com/dai_shi/status/1823896762542928373
- https://x.com/dai_shi/status/1824424680721354980
- https://x.com/dai_shi/status/1825484689030955094
- https://x.com/dai_shi/status/1883730673091117386