diff --git a/docs/src/pages/index.astro b/docs/src/pages/index.astro index c92634d..58b5da2 100644 --- a/docs/src/pages/index.astro +++ b/docs/src/pages/index.astro @@ -234,6 +234,42 @@ export const backupTheStateForWhateverReason = () => { }, 10000); } `.trim(); + +const getRealtimeSample = ` +import { useStore } from "./utils/store"; + +/** + * Assume initial data is: + * todos = ['My first todo'] + */ + +export default function Todos() { + const [ todos, realtimeTodos ] = useStore( + state => state.todos + ); + + useEffect(() => { + update.merge({ todos: ['My second todo'] }); + }, []); + + useEffect(() => { + // your function closure has a todo variable + // with ONE entry ( ["My first todo"] ) + + // if, for whatever reason, you need the state + // in realtime, so ignoring the current function closure / lifecycle + // you can use + const _todos = realtimeTodos(); + + // again: normally you don't need this. + // because react will re-render with the new state + }, []); + + return ( + // ... + ); +} +`.trim(); --- @@ -539,7 +575,7 @@ export const backupTheStateForWhateverReason = () => {