Another custom hook to use Valtio proxy state
npm install use-valtio
Another custom hook to use Valtio proxy state
``bash`
npm install valtio use-valtio
`jsx
import { proxy } from 'valtio/vanilla';
import { useValtio } from 'use-valtio';
const state = proxy({ count });
const Counter = () => {
const { count } = useValtio(state);
const inc = () => ++state.count;
return (
But, why?
Valtio has
hook that can be used with proxy state,
which is similar to useValtio.`jsx
import { useSnapshot } from 'valtio';
` is implemented with useSyncExternalStore which is
a recommended way to use "external stores". It solves tearing issues.However, the "Sync" behavior doesn't work nicely with concurrent rendering.
We can't use
startTransition as expected.useValtio doesn't use useSyncExternalStore,
but only useReducer and useEffect.
It suffers from tearing, but works better with concurrent rendering.After all, it's a trade-off.
There's one caveat in
useValtio.
To make it work with transitions, it forces "sync=true".
By default, useSnapshot works with "sync=false".`js
const { count } = useValtio(state);
// That 👆 is equivalent to this 👇.
const { count } = useSnapshot(state, { sync: true });
`Examples
The examples folder contains working examples.
You can run one of them with
bash
PORT=8080 pnpm run examples:01_counter
``and open