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

package/src/experimental/components/LiveList.tsx

@@ -1,4 +1,4 @@
-import type { LiveQueryDef } from '@livestore/livestore'
+import type { LiveQueryDef, Store } from '@livestore/livestore'
 import { computed } from '@livestore/livestore'
 import React from 'react'
 
@@ -16,6 +16,8 @@ export type LiveListProps<TItem> = {
   renderItem: (item: TItem, opts: { index: number; isInitialListRender: boolean }) => React.ReactNode
   /** Needs to be unique across all list items */
   getKey: (item: TItem, index: number) => string | number
+  /** The store instance to use for queries */
+  store: Store<any, any>
 }
 
 /**
@@ -26,12 +28,15 @@ export type LiveListProps<TItem> = {
  * In the future we want to make this component even more efficient by using incremental rendering (https://github.com/livestorejs/livestore/pull/55)
  * e.g. when an item is added/removed/moved to only re-render the affected DOM nodes.
  */
-export const LiveList = <TItem,>({ items$, renderItem, getKey }: LiveListProps<TItem>): React.ReactNode => {
+export const LiveList = <TItem,>({ items$, renderItem, getKey, store }: LiveListProps<TItem>): React.ReactNode => {
   const [hasMounted, setHasMounted] = React.useState(false)
 
   React.useEffect(() => setHasMounted(true), [])
 
-  const keys = useQuery(computed((get) => get(items$).map(getKey)))
+  const keys = useQuery(
+    computed((get) => get(items$).map(getKey)),
+    { store },
+  )
   const arr = React.useMemo(
     () =>
       keys.map(
@@ -54,7 +59,9 @@ export const LiveList = <TItem,>({ items$, renderItem, getKey }: LiveListProps<T
           key={key}
           itemKey={key}
           item$={item$}
-          opts={{ isInitialListRender: !hasMounted, index }}
+          store={store}
+          index={index}
+          isInitialListRender={!hasMounted}
           renderItem={renderItem}
         />
       ))}
@@ -64,15 +71,20 @@ export const LiveList = <TItem,>({ items$, renderItem, getKey }: LiveListProps<T
 
 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$)
+  const item = useQuery(item$, { store })
+  const opts = React.useMemo(() => ({ index, isInitialListRender }), [index, isInitialListRender])
 
   return <>{renderItem(item, opts)}</>
 }
@@ -82,6 +94,7 @@ const ItemWrapperMemo = React.memo(
   (prev, next) =>
     prev.itemKey === next.itemKey &&
     prev.renderItem === next.renderItem &&
-    prev.opts.index === next.opts.index &&
-    prev.opts.isInitialListRender === next.opts.isInitialListRender,
+    prev.store === next.store &&
+    prev.index === next.index &&
+    prev.isInitialListRender === next.isInitialListRender,
 ) as typeof ItemWrapper

package/src/experimental/mod.ts

@@ -1,2 +1 @@
 export { LiveList, type LiveListProps } from './components/LiveList.tsx'
-export * from './multi-store/mod.ts'

package/src/mod.ts

@@ -1,13 +1,9 @@
-export { LiveStoreContext, type ReactApi } from './LiveStoreContext.ts'
-export { LiveStoreProvider } from './LiveStoreProvider.tsx'
-export {
-  type Dispatch,
-  type SetStateAction,
-  type SetStateActionPartial,
-  type StateSetters,
-  type UseClientDocumentResult,
-  useClientDocument,
-} from './useClientDocument.ts'
+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 UseClientDocumentResult, useClientDocument } from './useClientDocument.ts'
 export { useQuery, useQueryRef } from './useQuery.ts'
-export { useStore, withReactApi } from './useStore.ts'
-export { useStackInfo } from './utils/stack-info.ts'
+export { type ReactApi, useStore, withReactApi } from './useStore.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,12 +1,13 @@
+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 { LiveStoreContext } from './LiveStoreContext.ts'
 import { useQueryRef } from './useQuery.ts'
 
 /**
@@ -115,20 +116,15 @@ export const useClientDocument: {
 
   const tableName = table.sqliteDef.name
 
-  const store =
-    storeArg?.store ?? // biome-ignore lint/correctness/useHookAtTopLevel: store is stable
-    React.useContext(LiveStoreContext)?.store ??
-    shouldNeverHappen(`No store provided to useClientDocument`)
-
-  // console.debug('useClientDocument', tableName, id)
+  const store = storeArg?.store ?? shouldNeverHappen(`No store provided to useClientDocument`)
 
   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],
   )
@@ -143,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,22 +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 { LiveStoreContext } from './LiveStoreContext.ts'
 import { useRcResource } from './useRcResource.ts'
-import { originalStackLimit } from './utils/stack-info.ts'
 import { useStateRefWithReactiveInput } from './utils/useStateRefWithReactiveInput.ts'
 
 /**
@@ -49,7 +46,7 @@ export const useQuery = <TQueryable extends Queryable<any>>(
  *
  * Parameters
  * - `queryable`: The query definition/instance/builder to run and subscribe to.
- * - `options.store`: Optional store to use; by default the store from `LiveStoreContext` is used.
+ * - `options.store`: The store to use. Required when calling `useQueryRef` directly; automatically provided when using `store.useQuery()`.
  * - `options.otelContext`: Optional parent otel context for the query span.
  * - `options.otelSpanName`: Optional explicit span name; otherwise derived from the query label.
  *
@@ -71,130 +68,45 @@ export const useQueryRef = <TQueryable extends Queryable<any>>(
   valueRef: React.RefObject<Queryable.Result<TQueryable>>
   queryRcRef: LiveQueries.RcRef<LiveQuery<Queryable.Result<TQueryable>>>
 } => {
-  const store =
-    options?.store ?? // biome-ignore lint/correctness/useHookAtTopLevel: store is stable
-    React.useContext(LiveStoreContext)?.store ??
-    shouldNeverHappen(`No store provided to useQuery`)
+  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,
@@ -225,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)
       }
     }