replicache-react v5.0.1

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

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>
);