replicache-react
npm i replicache-react
Build your UI using subscribe() (or useSubscribe in React).
Whenever the data in Replicache changes — either due to changes in this tab, another tab, or on the server — the affected UI automatically updates.
Replicache only refires subscriptions when the query results have actually changed, eliminating wasteful re-renders.
API
function useSubscribe
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 |
def |
R | default value returned on first render or whenever query returns undefined
|
deps |
Array = [] | OPTIONAL: list of dependencies, query will be rerun when any of these change |
Usage
example of useSubscribe in todo app that is watching a specific category
const {category} = props;
const todos = useSubscribe(
replicache,
tx =>
tx
.scan({prefix: `/todo/${category}`})
.values()
.toArray(),
[],
[category],
);
return (
<ul>
{todos.map(t => (
<li>{t.title}</li>
))}
</ul>
);Changelog
0.4.0
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:
useSubscribe(r, tx => (await tx.get('count')) ?? 0, 0);now:
useSubscribe(r, tx => tx.get('count'), 0);