replicache-react


npm i replicache-react

Provides a useSubscribe() hook for React which wraps Replicache's subscribe() method.

API

$3

React hook that allows you monitor replicache changes

| Parameter | Type | Description |
| :--------------- | :------------------------------------------ | :------------------------------------------------------------------------------- |
| rep | Replicache | Replicache instance that is being monitored |
| query | (tx: ReadTransaction) => Promise | Query that retrieves data to be watched |
| options? | Object \| undefined | Option bag containing the named arguments listed below ⬇️ |
| .default? | R \| undefined = undefined | Default value returned on first render _or_ whenever query returns undefined |
| .dependencies? | Array = [] | List of dependencies, query will be rerun when any of these change |
| .isEqual? | ((a: R, b: R) => boolean) = jsonDeepEqual | Compare two returned values. Used to know whether to refire subscription. |

Usage

example of useSubscribe in todo app that is watching a specific category

``js
const {category} = props;
const todos = useSubscribe(
replicache,
tx => {
return tx
.scan({prefix: /todo/${category}})
.values()
.toArray();
},
{
default: [],
dependencies: [category],
},
);

return (


{todos.map(t => (

• {t.title}

))}


);
`

Changelog

$3

Remove unstable_batchedUpdates - no longer needed with React 19's automatic batching.
Requires React 19+. See https://react.dev/blog/2024/12/05/react-19

$3

Change package to pure ESM. See See https://github.com/rocicorp/replicache-react/pull/61 for more information.

$3

- Add support for custom isEqual. See https://github.com/rocicorp/replicache-react/pull/59 for more information.
- Requires Replicache 14.

$3

Removes def from default dependencies. This is how it was before 0.4.0. Including by default makes it very easy to accidentally trigger render loops. People can added it explicitly if they really want.

$3

This release changes the semantics of def slightly. In previous releases, def was returned only until query returned, then useSubscribe returns query's result. Now, def is returned initially, but also if query returns undefined.

This is an ergonomic benefit because it avoids having to type the default in two places. Before:

`ts
useSubscribe(r, tx => (await tx.get('count')) ?? 0, 0);
`

now:

`ts
useSubscribe(r, tx => tx.get('count'), 0);
`

$3

Support a new generic form of ReadTransaction. New Replicaches and Reflects have tx.get and tx.scan. This update adds support for these to replicache-react. See: https://github.com/rocicorp/replicache-react/pull/55

$3

Support (and require) Replicache 13.

$3

When changing the value of r passed in, return the def` value again, until the new subscription fires. See: https://github.com/rocicorp/replicache-react/commit/369d7513b09f48598db338c6776a9a22c7198e5c