@livestore/react 0.4.0-dev.22 → 0.4.0-dev.23

package/src/__tests__/fixture.tsx

@@ -1,110 +1,32 @@
-import { makeInMemoryAdapter } from '@livestore/adapter-web'
-import { provideOtel, type UnknownError } from '@livestore/common'
-import { Events, makeSchema, State } from '@livestore/common/schema'
-import type { LiveStoreSchema, SqliteDsl, Store } from '@livestore/livestore'
-import { createStore } from '@livestore/livestore'
-import { omitUndefineds } from '@livestore/utils'
-import { Effect, Schema, type Scope } from '@livestore/utils/effect'
-import type * as otel from '@opentelemetry/api'
+import type { UnknownError } from '@livestore/common'
+import {
+  type AppState,
+  type CreateTodoMvcStoreOptions,
+  createTodoMvcStore,
+  events,
+  type Filter,
+  schema,
+  type Todo,
+  tables,
+} from '@livestore/framework-toolkit/testing'
+import type { Store } from '@livestore/livestore'
+import { Effect, type Scope } from '@livestore/utils/effect'
 import React from 'react'
 
 import * as LiveStoreReact from '../mod.ts'
 
-export type Todo = {
-  id: string
-  text: string
-  completed: boolean
-}
-
-export type Filter = 'all' | 'active' | 'completed'
-
-export type AppState = {
-  newTodoText: string
-  filter: Filter
-}
-
-const todos = State.SQLite.table({
-  name: 'todos',
-  columns: {
-    id: State.SQLite.text({ primaryKey: true }),
-    text: State.SQLite.text({ default: '', nullable: false }),
-    completed: State.SQLite.boolean({ default: false, nullable: false }),
-  },
-})
-
-const app = State.SQLite.table({
-  name: 'app',
-  columns: {
-    id: State.SQLite.text({ primaryKey: true, default: 'static' }),
-    newTodoText: State.SQLite.text({ default: '', nullable: true }),
-    filter: State.SQLite.text({ default: 'all', nullable: false }),
-  },
-})
-
-const userInfo = State.SQLite.clientDocument({
-  name: 'UserInfo',
-  schema: Schema.Struct({
-    username: Schema.String,
-    text: Schema.String,
-  }),
-  default: { value: { username: '', text: '' } },
-})
-
-const AppRouterSchema = State.SQLite.clientDocument({
-  name: 'AppRouter',
-  schema: Schema.Struct({
-    currentTaskId: Schema.String.pipe(Schema.NullOr),
-  }),
-  default: {
-    value: { currentTaskId: null },
-    id: 'singleton',
-  },
-})
-
-const kv = State.SQLite.clientDocument({
-  name: 'Kv',
-  schema: Schema.Any,
-  default: { value: null },
-})
-
-export const events = {
-  todoCreated: Events.synced({
-    name: 'todoCreated',
-    schema: Schema.Struct({ id: Schema.String, text: Schema.String, completed: Schema.Boolean }),
-  }),
-  todoUpdated: Events.synced({
-    name: 'todoUpdated',
-    schema: Schema.Struct({
-      id: Schema.String,
-      text: Schema.String.pipe(Schema.optional),
-      completed: Schema.Boolean.pipe(Schema.optional),
-    }),
-  }),
-  AppRouterSet: AppRouterSchema.set,
-  UserInfoSet: userInfo.set,
-  KvSet: kv.set,
-}
-
-const materializers = State.SQLite.materializers(events, {
-  todoCreated: ({ id, text, completed }) => todos.insert({ id, text, completed }),
-  todoUpdated: ({ id, text, completed }) => todos.update({ ...omitUndefineds({ completed, text }) }).where({ id }),
-})
-
-export const tables = { todos, app, userInfo, AppRouterSchema, kv }
-
-const state = State.SQLite.makeState({ tables, materializers })
-export const schema = makeSchema({ state, events })
+// Re-export shared types and schema
+export { events, schema, tables }
+export type { AppState, Filter, Todo }
 
-export type MakeTodoMvcReactOptions = {
-  otelTracer?: otel.Tracer | undefined
-  otelContext?: otel.Context | undefined
+export type MakeTodoMvcReactOptions = CreateTodoMvcStoreOptions & {
   strictMode?: boolean | undefined
 }
 
 export const makeTodoMvcReact: (opts?: MakeTodoMvcReactOptions) => Effect.Effect<
   {
     wrapper: ({ children }: any) => React.JSX.Element
-    store: Store<LiveStoreSchema<SqliteDsl.DbSchema, State.SQLite.EventDefRecord>, {}> & LiveStoreReact.ReactApi
+    store: Store<typeof schema> & LiveStoreReact.ReactApi
     renderCount: { readonly val: number; inc: () => void }
   },
   UnknownError,
@@ -116,7 +38,7 @@ export const makeTodoMvcReact: (opts?: MakeTodoMvcReactOptions) => Effect.Effect
       let val = 0
 
       const inc = () => {
-        val += strictMode ? 0.5 : 1
+        val += strictMode === true ? 0.5 : 1
       }
 
       return {
@@ -127,20 +49,15 @@ export const makeTodoMvcReact: (opts?: MakeTodoMvcReactOptions) => Effect.Effect
       }
     }
 
-    const store: Store<any> = yield* createStore({
-      schema,
-      storeId: 'default',
-      adapter: makeInMemoryAdapter(),
-      debug: { instanceId: 'test' },
-    })
+    const store = yield* createTodoMvcStore(opts)
 
     const storeWithReactApi = LiveStoreReact.withReactApi(store)
 
-    const MaybeStrictMode = strictMode ? React.StrictMode : React.Fragment
+    const MaybeStrictMode = strictMode === true ? React.StrictMode : React.Fragment
 
     const wrapper = ({ children }: any) => <MaybeStrictMode>{children}</MaybeStrictMode>
 
     const renderCount = makeRenderCount()
 
     return { wrapper, store: storeWithReactApi, renderCount }
-  }).pipe(provideOtel(omitUndefineds({ parentSpanContext: opts.otelContext, otelTracer: opts.otelTracer })))
+  })

package/src/experimental/components/LiveList.tsx

@@ -60,7 +60,8 @@ export const LiveList = <TItem,>({ items$, renderItem, getKey, store }: LiveList
           itemKey={key}
           item$={item$}
           store={store}
-          opts={{ isInitialListRender: !hasMounted, index }}
+          index={index}
+          isInitialListRender={!hasMounted}
           renderItem={renderItem}
         />
       ))}
@@ -70,17 +71,20 @@ export const LiveList = <TItem,>({ items$, renderItem, getKey, store }: LiveList
 
 const ItemWrapper = <TItem,>({
   item$,
-  opts,
+  index,
+  isInitialListRender,
   renderItem,
   store,
 }: {
   itemKey: string | number
   item$: LiveQueryDef<TItem>
-  opts: { index: number; isInitialListRender: boolean }
+  index: number
+  isInitialListRender: boolean
   renderItem: (item: TItem, opts: { index: number; isInitialListRender: boolean }) => React.ReactNode
   store: Store<any, any>
 }) => {
   const item = useQuery(item$, { store })
+  const opts = React.useMemo(() => ({ index, isInitialListRender }), [index, isInitialListRender])
 
   return <>{renderItem(item, opts)}</>
 }
@@ -91,6 +95,6 @@ const ItemWrapperMemo = React.memo(
     prev.itemKey === next.itemKey &&
     prev.renderItem === next.renderItem &&
     prev.store === next.store &&
-    prev.opts.index === next.opts.index &&
-    prev.opts.isInitialListRender === next.opts.isInitialListRender,
+    prev.index === next.index &&
+    prev.isInitialListRender === next.isInitialListRender,
 ) as typeof ItemWrapper

package/src/mod.ts

@@ -1,14 +1,9 @@
+export type { Dispatch, SetStateAction, SetStateActionPartial, StateSetters } from '@livestore/framework-toolkit'
+export { captureStackInfo } from '@livestore/framework-toolkit'
 export { StoreRegistry, storeOptions } from '@livestore/livestore'
 export { LiveList, type LiveListProps } from './experimental/components/LiveList.tsx'
 export * from './StoreRegistryContext.tsx'
-export {
-  type Dispatch,
-  type SetStateAction,
-  type SetStateActionPartial,
-  type StateSetters,
-  type UseClientDocumentResult,
-  useClientDocument,
-} from './useClientDocument.ts'
+export { type UseClientDocumentResult, useClientDocument } from './useClientDocument.ts'
 export { useQuery, useQueryRef } from './useQuery.ts'
 export { type ReactApi, useStore, withReactApi } from './useStore.ts'
-export { useStackInfo } from './utils/stack-info.ts'
+export { useSyncStatus } from './useSyncStatus.ts'

package/src/useClientDocument.test.tsx

@@ -8,7 +8,7 @@ import { Vitest } from '@livestore/utils-dev/node-vitest'
 import * as otel from '@opentelemetry/api'
 import { BasicTracerProvider, InMemorySpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base'
 import * as ReactTesting from '@testing-library/react'
-import type React from 'react'
+import * as React from 'react'
 import { beforeEach, expect, it } from 'vitest'
 
 import { events, makeTodoMvcReact, tables } from './__tests__/fixture.tsx'
@@ -120,25 +120,35 @@ Vitest.describe('useClientDocument', () => {
         renderCount.inc()
 
         const [state, setState] = store.useClientDocument(tables.AppRouterSchema, 'singleton')
+        const setCurrentTaskId = React.useCallback((taskId: string) => setState({ currentTaskId: taskId }), [setState])
 
         globalSetState = setState
 
         return (
           <div>
-            <TasksList setTaskId={(taskId) => setState({ currentTaskId: taskId })} />
+            <TasksList setTaskId={setCurrentTaskId} />
             <div role="current-id">Current Task Id: {state.currentTaskId ?? '-'}</div>
-            {state.currentTaskId ? <TaskDetails id={state.currentTaskId} /> : <div>Click on a task to see details</div>}
+            {state.currentTaskId !== null ? <TaskDetails id={state.currentTaskId} /> : <div>Click on a task to see details</div>}
           </div>
         )
       }
 
       const TasksList: React.FC<{ setTaskId: (_: string) => void }> = ({ setTaskId }) => {
         const allTodos = store.useQuery(allTodos$)
+        const handleTaskClick = React.useCallback(
+          (event: React.MouseEvent<HTMLDivElement>) => {
+            const taskId = event.currentTarget.dataset.taskId
+            if (taskId !== undefined) {
+              setTaskId(taskId)
+            }
+          },
+          [setTaskId],
+        )
 
         return (
           <div>
             {allTodos.map((_) => (
-              <div key={_.id} onClick={() => setTaskId(_.id)}>
+              <div key={_.id} data-task-id={_.id} onClick={handleTaskClick}>
                 {_.id}
               </div>
             ))}
@@ -264,7 +274,7 @@ Vitest.describe('useClientDocument', () => {
         spanProcessors: [new SimpleSpanProcessor(exporter)],
       })
 
-      const otelTracer = provider.getTracer(`testing-${strictMode ? 'strict' : 'non-strict'}`)
+      const otelTracer = provider.getTracer(`testing-${strictMode !== undefined ? 'strict' : 'non-strict'}`)
 
       const span = otelTracer.startSpan('test-root')
       const otelContext = otel.trace.setSpan(otel.context.active(), span)
@@ -314,7 +324,7 @@ Vitest.describe('useClientDocument', () => {
             const stackInfo = JSON.parse(val as string) as LiveStore.StackInfo
             // stackInfo.frames.shift() // Removes `renderHook.wrapper` from the stack
             stackInfo.frames.forEach((_) => {
-              if (_.name.includes('renderHook.wrapper')) {
+              if (_.name.includes('renderHook.wrapper') === true) {
                 _.name = 'renderHook.wrapper'
               }
               _.filePath = '__REPLACED_FOR_SNAPSHOT__'

package/src/useClientDocument.ts

@@ -1,10 +1,12 @@
+import React from 'react'
+
 import type { RowQuery } from '@livestore/common'
 import { SessionIdSymbol } from '@livestore/common'
 import { State } from '@livestore/common/schema'
+import { removeUndefinedValues, type StateSetters, validateTableOptions } from '@livestore/framework-toolkit'
 import type { LiveQuery, LiveQueryDef, Store } from '@livestore/livestore'
 import { queryDb } from '@livestore/livestore'
 import { omitUndefineds, shouldNeverHappen } from '@livestore/utils'
-import React from 'react'
 
 import { useQueryRef } from './useQuery.ts'
 
@@ -116,15 +118,13 @@ export const useClientDocument: {
 
   const store = storeArg?.store ?? shouldNeverHappen(`No store provided to useClientDocument`)
 
-  // console.debug('useClientDocument', tableName, id)
-
   const idStr: string = id === SessionIdSymbol ? store.sessionId : id
 
   type QueryDef = LiveQueryDef<TTableDef['Value']>
   const queryDef: QueryDef = React.useMemo(
     () =>
-      queryDb(table.get(id!, { default: defaultValues! }), {
-        deps: [idStr!, table.sqliteDef.name, JSON.stringify(defaultValues)],
+      queryDb(table.get(id, { default: defaultValues! }), {
+        deps: [idStr, table.sqliteDef.name, JSON.stringify(defaultValues)],
       }),
     [table, id, defaultValues, idStr],
   )
@@ -139,60 +139,10 @@ export const useClientDocument: {
       const newValue = typeof newValueOrFn === 'function' ? newValueOrFn(queryRef.valueRef.current) : newValueOrFn
       if (queryRef.valueRef.current === newValue) return
 
-      store.commit(table.set(removeUndefinedValues(newValue), id as any))
+      store.commit(table.set(removeUndefinedValues(newValue), id))
     },
     [id, queryRef.valueRef, store, table],
   )
 
   return [queryRef.valueRef.current, setState, idStr, queryRef.queryRcRef.value]
 }
-
-/**
- * A function that dispatches an action. Mirrors React's `Dispatch` type.
- * @typeParam A - The action type
- */
-export type Dispatch<A> = (action: A) => void
-
-/**
- * A state update that can be either a partial value or a function returning a partial value.
- * Used when the client-document table has `partialSet: true`.
- * @typeParam S - The state type
- */
-export type SetStateActionPartial<S> = Partial<S> | ((previousValue: S) => Partial<S>)
-
-/**
- * A state update that can be either a full value or a function returning a full value.
- * Mirrors React's `SetStateAction` type.
- * @typeParam S - The state type
- */
-export type SetStateAction<S> = S | ((previousValue: S) => S)
-
-/**
- * The setter function type for `useClientDocument`, determined by the table's `partialSet` option.
- *
- * - If `partialSet: false` (default), requires full state replacement
- * - If `partialSet: true`, accepts partial updates merged with existing state
- *
- * @typeParam TTableDef - The client-document table definition type
- */
-export type StateSetters<TTableDef extends State.SQLite.ClientDocumentTableDef.TraitAny> = Dispatch<
-  TTableDef[State.SQLite.ClientDocumentTableDefSymbol]['options']['partialSet'] extends false
-    ? SetStateAction<TTableDef['Value']>
-    : SetStateActionPartial<TTableDef['Value']>
->
-
-const validateTableOptions = (table: State.SQLite.TableDef<any, any>) => {
-  if (State.SQLite.tableIsClientDocumentTable(table) === false) {
-    return shouldNeverHappen(
-      `useClientDocument called on table "${table.sqliteDef.name}" which is not a client document table`,
-    )
-  }
-}
-
-const removeUndefinedValues = (value: any) => {
-  if (typeof value === 'object' && value !== null) {
-    return Object.fromEntries(Object.entries(value).filter(([_, v]) => v !== undefined))
-  }
-
-  return value
-}

package/src/useQuery.test.tsx

@@ -1,14 +1,14 @@
+import * as ReactTesting from '@testing-library/react'
+import React from 'react'
+import * as ReactWindow from 'react-window'
+import { expect } from 'vitest'
+
 /** biome-ignore-all lint/a11y: test */
 import * as LiveStore from '@livestore/livestore'
 import { queryDb, StoreInternalsSymbol, signal } from '@livestore/livestore'
 import { RG } from '@livestore/livestore/internal/testing-utils'
-import { Effect, Schema } from '@livestore/utils/effect'
 import { Vitest } from '@livestore/utils-dev/node-vitest'
-import * as ReactTesting from '@testing-library/react'
-import React from 'react'
-// @ts-expect-error no types
-import * as ReactWindow from 'react-window'
-import { expect } from 'vitest'
+import { Effect, Schema } from '@livestore/utils/effect'
 
 import { events, makeTodoMvcReact, tables } from './__tests__/fixture.tsx'
 import { __resetUseRcResourceCache } from './useRcResource.ts'
@@ -156,7 +156,7 @@ Vitest.describe.each([{ strictMode: true }, { strictMode: false }] as const)(
               width={100}
               itemSize={10}
               itemCount={numItems}
-              itemData={Array.from({ length: numItems }, (_, i) => i).reverse()}
+              itemData={Array.from({ length: numItems }, (_, i) => i).toReversed()}
             >
               {ListItem}
             </ReactWindow.FixedSizeList>
@@ -223,7 +223,7 @@ Vitest.describe.each([{ strictMode: true }, { strictMode: false }] as const)(
         const { result, rerender } = ReactTesting.renderHook(
           (useNum: boolean) => {
             renderCount.inc()
-            const query$ = React.useMemo(() => (useNum ? num$ : str$), [useNum])
+            const query$ = React.useMemo(() => (useNum === true ? num$ : str$), [useNum])
             return store.useQuery(query$)
           },
           { wrapper, initialProps: false },

package/src/useQuery.ts

@@ -1,21 +1,19 @@
-import { isQueryBuilder } from '@livestore/common'
-import type { LiveQuery, LiveQueryDef, Store } from '@livestore/livestore'
+import type * as otel from '@opentelemetry/api'
+import React from 'react'
+
 import {
-  extractStackInfoFromStackTrace,
-  isQueryable,
-  type Queryable,
-  queryDb,
-  type SignalDef,
-  StoreInternalsSymbol,
-  stackInfoToString,
-} from '@livestore/livestore'
+  captureStackInfo,
+  computeRcRefKey,
+  createQueryResource,
+  type NormalizedQueryable,
+  normalizeQueryable,
+  runInitialQuery,
+} from '@livestore/framework-toolkit'
+import type { LiveQuery, Queryable, Store } from '@livestore/livestore'
 import type { LiveQueries } from '@livestore/livestore/internal'
-import { deepEqual, indent, shouldNeverHappen } from '@livestore/utils'
-import * as otel from '@opentelemetry/api'
-import React from 'react'
+import { deepEqual, shouldNeverHappen } from '@livestore/utils'
 
 import { useRcResource } from './useRcResource.ts'
-import { originalStackLimit } from './utils/stack-info.ts'
 import { useStateRefWithReactiveInput } from './utils/useStateRefWithReactiveInput.ts'
 
 /**
@@ -73,124 +71,42 @@ export const useQueryRef = <TQueryable extends Queryable<any>>(
   const store = options?.store ?? shouldNeverHappen(`No store provided to useQuery`)
 
   type TResult = Queryable.Result<TQueryable>
-  type NormalizedQueryable =
-    | { _tag: 'definition'; def: LiveQueryDef<TResult> | SignalDef<TResult> }
-    | { _tag: 'live-query'; query$: LiveQuery<TResult> }
-
-  const normalized = React.useMemo<NormalizedQueryable>(() => {
-    if (!isQueryable(queryable)) {
-      return shouldNeverHappen('useQuery expected a Queryable value')
-    }
-
-    if (isQueryBuilder(queryable)) {
-      return { _tag: 'definition', def: queryDb(queryable) }
-    }
 
-    if (
-      (queryable as LiveQueryDef<TResult> | SignalDef<TResult>)._tag === 'def' ||
-      (queryable as LiveQueryDef<TResult> | SignalDef<TResult>)._tag === 'signal-def'
-    ) {
-      return { _tag: 'definition', def: queryable as LiveQueryDef<TResult> | SignalDef<TResult> }
-    }
-
-    return { _tag: 'live-query', query$: queryable as LiveQuery<TResult> }
-  }, [queryable])
-
-  // It's important to use all "aspects" of a store instance here, otherwise we get unexpected cache mappings
-  const rcRefKey = React.useMemo(() => {
-    const base = `${store.storeId}_${store.clientId}_${store.sessionId}`
-
-    if (normalized._tag === 'definition') {
-      return `${base}:def:${normalized.def.hash}`
-    }
-
-    return `${base}:instance:${normalized.query$.id}`
-  }, [normalized, store.clientId, store.sessionId, store.storeId])
+  const normalized = React.useMemo<NormalizedQueryable<TResult>>(
+    () => normalizeQueryable(queryable as Queryable<TResult>),
+    [queryable],
+  )
 
-  const resourceLabel = normalized._tag === 'definition' ? normalized.def.label : normalized.query$.label
+  const rcRefKey = React.useMemo(() => computeRcRefKey(store, normalized), [normalized, store])
 
-  const stackInfo = React.useMemo(() => {
-    Error.stackTraceLimit = 10
-    const stack = new Error().stack!
-    Error.stackTraceLimit = originalStackLimit
-    return extractStackInfoFromStackTrace(stack)
-  }, [])
+  const stackInfo = React.useMemo(() => captureStackInfo(), [])
 
   const { queryRcRef, span, otelContext } = useRcResource(
     rcRefKey,
-    () => {
-      const span = store[StoreInternalsSymbol].otel.tracer.startSpan(
-        options?.otelSpanName ?? `LiveStore:useQuery:${resourceLabel}`,
-        { attributes: { label: resourceLabel, firstStackInfo: JSON.stringify(stackInfo) } },
-        options?.otelContext ?? store[StoreInternalsSymbol].otel.queriesSpanContext,
-      )
-
-      const otelContext = otel.trace.setSpan(otel.context.active(), span)
-
-      const queryRcRef =
-        normalized._tag === 'definition'
-          ? normalized.def.make(store[StoreInternalsSymbol].reactivityGraph.context!, otelContext)
-          : ({
-              value: normalized.query$,
-              deref: () => {},
-              rc: Number.POSITIVE_INFINITY,
-            } satisfies LiveQueries.RcRef<LiveQuery<TResult>>)
-
-      return { queryRcRef, span, otelContext }
-    },
+    () =>
+      createQueryResource(store, normalized, stackInfo, {
+        otelSpanName: options?.otelSpanName,
+        otelContext: options?.otelContext,
+      }),
     // We need to keep the queryRcRef alive a bit longer, so we have a second `useRcResource` below
     // which takes care of disposing the queryRcRef
     () => {},
   )
 
-  // if (queryRcRef.value._tag === 'signal') {
-  //   const  queryRcRef.value.get()
-  // }
-
-  const query$ = queryRcRef.value as LiveQuery<TResult>
+  const query$ = queryRcRef.value
 
   React.useDebugValue(`LiveStore:useQuery:${query$.id}:${query$.label}`)
-  // console.debug(`LiveStore:useQuery:${query$.id}:${query$.label}`)
-
-  const initialResult = React.useMemo(() => {
-    try {
-      return query$.run({
-        otelContext,
-        debugRefreshReason: {
-          _tag: 'react',
-          api: 'useQuery',
-          label: `useQuery:initial-run:${query$.label}`,
-          stackInfo,
-        },
-      })
-    } catch (cause: any) {
-      console.error('[@livestore/react:useQuery] Error running query', cause)
-      throw new Error(
-        `\
-[@livestore/react:useQuery] Error running query: ${cause.name}
 
-Query: ${query$.label}
-
-React trace:
-
-${indent(stackInfoToString(stackInfo), 4)}
-
-Stack trace:
-`,
-        { cause },
-      )
-    }
-  }, [otelContext, query$, stackInfo])
+  const initialResult = React.useMemo(
+    () => runInitialQuery(query$, otelContext, stackInfo, 'react'),
+    [otelContext, query$, stackInfo],
+  )
 
   // We know the query has a result by the time we use it; so we can synchronously populate a default state
   const [valueRef, setValue] = useStateRefWithReactiveInput<TResult>(initialResult)
 
-  // TODO we probably need to change the order of `useEffect` calls, so we destroy the query at the end
-  // before calling the LS `onEffect` on it
-
   // Subscribe to future updates for this query
   React.useEffect(() => {
-    // TODO double check whether we still need `activeSubscriptions`
     query$.activeSubscriptions.add(stackInfo)
 
     // Dynamic queries only set their actual label after they've been run the first time,
@@ -221,7 +137,6 @@ Stack trace:
     rcRefKey,
     () => ({ queryRcRef, span }),
     ({ queryRcRef, span }) => {
-      // console.debug('deref', queryRcRef.value.id, queryRcRef.value.label)
       queryRcRef.deref()
       span.end()
     },

package/src/useRcResource.test.tsx

@@ -9,7 +9,7 @@ describe.each([{ strictMode: true }, { strictMode: false }])('useRcResource (str
     __resetUseRcResourceCache()
   })
 
-  const wrapper = strictMode ? React.StrictMode : React.Fragment
+  const wrapper = strictMode === true ? React.StrictMode : React.Fragment
 
   it('should create a stateful entity using make and call cleanup on unmount', () => {
     const makeSpy = vi.fn(() => Symbol('statefulResource'))

package/src/useRcResource.ts

@@ -79,11 +79,16 @@ export const useRcResource = <T>(
 ): T => {
   const keyRef = React.useRef<string | undefined>(undefined)
   const didDisposeInMemo = React.useRef(false)
+  const createRef = React.useRef(create)
+  const disposeRef = React.useRef(dispose)
+
+  createRef.current = create
+  disposeRef.current = dispose
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: Dependency is deliberately limited to `key` to avoid unintended re-creations.
   const resource = React.useMemo(() => {
     // console.debug('useMemo', key)
-    if (didDisposeInMemo.current) {
+    if (didDisposeInMemo.current === true) {
       // console.debug('useMemo', key, 'skip')
       const cachedItem = cache.get(key)
       if (cachedItem !== undefined && cachedItem._tag === 'active') {
@@ -104,7 +109,7 @@ export const useRcResource = <T>(
 
         if (cachedItemForPreviousKey.rc === 0) {
           // Clean up the stateful resource if no longer referenced
-          dispose(cachedItemForPreviousKey.resource)
+          disposeRef.current(cachedItemForPreviousKey.resource)
           cache.set(previousKey, { _tag: 'destroyed' })
           didDisposeInMemo.current = true
         }
@@ -122,7 +127,7 @@ export const useRcResource = <T>(
     }
 
     // Create a new stateful resource if not cached
-    const resource = create()
+    const resource = createRef.current()
     cache.set(key, { _tag: 'active', rc: 1, resource })
     return resource
   }, [key])
@@ -130,7 +135,7 @@ export const useRcResource = <T>(
   // biome-ignore lint/correctness/useExhaustiveDependencies: We assume the `dispose` function is stable and won't change across renders
   React.useEffect(() => {
     return () => {
-      if (didDisposeInMemo.current) {
+      if (didDisposeInMemo.current === true) {
         // console.debug('unmount', keyRef.current, 'skip')
         didDisposeInMemo.current = false
         return
@@ -146,7 +151,7 @@ export const useRcResource = <T>(
       // console.debug('rc--', cachedItem.rc, ...(_options?.debugPrint?.(cachedItem.resource) ?? []))
 
       if (cachedItem.rc === 0) {
-        dispose(cachedItem.resource)
+        disposeRef.current(cachedItem.resource)
         cache.delete(key)
       }
     }