@livestore/react 0.3.0-dev.11 → 0.3.0-dev.5

package/src/__tests__/fixture.tsx

@@ -1,7 +1,7 @@
 import { provideOtel } from '@livestore/common'
 import { DbSchema, makeSchema } from '@livestore/common/schema'
 import type { LiveStoreContextRunning } from '@livestore/livestore'
-import { createStore } from '@livestore/livestore'
+import { createStore, globalReactivityGraph, makeReactivityGraph } from '@livestore/livestore'
 import { Effect } from '@livestore/utils/effect'
 import { makeInMemoryAdapter } from '@livestore/web'
 import type * as otel from '@opentelemetry/api'
@@ -42,7 +42,7 @@ export const app = DbSchema.table(
   { isSingleton: true },
 )
 
-export const userInfo = DbSchema.table(
+export const AppComponentSchema = DbSchema.table(
   'UserInfo',
   {
     username: DbSchema.text({ default: '' }),
@@ -59,16 +59,18 @@ export const AppRouterSchema = DbSchema.table(
   { isSingleton: true, deriveMutations: true },
 )
 
-export const tables = { todos, app, userInfo, AppRouterSchema }
+export const tables = { todos, app, AppComponentSchema, AppRouterSchema }
 export const schema = makeSchema({ tables })
 
 export const makeTodoMvcReact = ({
   otelTracer,
   otelContext,
-  strictMode,
+  useGlobalReactivityGraph = true,
+  strictMode = process.env.REACT_STRICT_MODE !== undefined,
 }: {
   otelTracer?: otel.Tracer
   otelContext?: otel.Context
+  useGlobalReactivityGraph?: boolean
   strictMode?: boolean
 } = {}) =>
   Effect.gen(function* () {
@@ -87,10 +89,13 @@ export const makeTodoMvcReact = ({
       }
     }
 
+    const reactivityGraph = useGlobalReactivityGraph ? globalReactivityGraph : makeReactivityGraph()
+
     const store = yield* createStore({
       schema,
       storeId: 'default',
       adapter: makeInMemoryAdapter(),
+      reactivityGraph,
       debug: { instanceId: 'test' },
     })
 
@@ -107,7 +112,5 @@ export const makeTodoMvcReact = ({
       </MaybeStrictMode>
     )
 
-    const renderCount = makeRenderCount()
-
-    return { wrapper, store, renderCount }
+    return { wrapper, store, reactivityGraph, makeRenderCount, strictMode }
   }).pipe(provideOtel({ parentSpanContext: otelContext, otelTracer }))

package/src/experimental/components/LiveList.tsx

@@ -1,8 +1,9 @@
-import type { LiveQueryDef } from '@livestore/livestore'
+import type { LiveQuery } from '@livestore/livestore'
 import { computed } from '@livestore/livestore'
 import React from 'react'
 
 import { useQuery } from '../../useQuery.js'
+import { useScopedQuery } from '../../useScopedQuery.js'
 
 /*
 TODO:
@@ -11,7 +12,7 @@ TODO:
 */
 
 export type LiveListProps<TItem> = {
-  items$: LiveQueryDef<ReadonlyArray<TItem>>
+  items$: LiveQuery<ReadonlyArray<TItem>>
   // TODO refactor render-flag to allow for transition animations on add/remove
   renderItem: (item: TItem, opts: { index: number; isInitialListRender: boolean }) => React.ReactNode
   /** Needs to be unique across all list items */
@@ -31,16 +32,14 @@ export const LiveList = <TItem,>({ items$, renderItem, getKey }: LiveListProps<T
 
   React.useEffect(() => setHasMounted(true), [])
 
-  const keys = useQuery(computed((get) => get(items$).map(getKey)))
+  const keysCb = React.useCallback(() => computed((get) => get(items$).map(getKey)), [getKey, items$])
+  const keys = useScopedQuery(keysCb, 'fixed')
   const arr = React.useMemo(
     () =>
       keys.map(
         (key) =>
           // TODO figure out a way so that `item$` returns an ordered lookup map to more efficiently find the item by key
-          [
-            key,
-            computed((get) => get(items$).find((item) => getKey(item, 0) === key)!) as LiveQueryDef<TItem>,
-          ] as const,
+          [key, computed((get) => get(items$).find((item) => getKey(item, 0) === key)!) as LiveQuery<TItem>] as const,
       ),
     [getKey, items$, keys],
   )
@@ -66,7 +65,7 @@ const ItemWrapper = <TItem,>({
   renderItem,
 }: {
   itemKey: string | number
-  item$: LiveQueryDef<TItem>
+  item$: LiveQuery<TItem>
   opts: { index: number; isInitialListRender: boolean }
   renderItem: (item: TItem, opts: { index: number; isInitialListRender: boolean }) => React.ReactNode
 }) => {

package/src/mod.ts

@@ -1,6 +1,7 @@
 export { LiveStoreContext, useStore } from './LiveStoreContext.js'
 export { LiveStoreProvider } from './LiveStoreProvider.js'
 export { useQuery } from './useQuery.js'
+export { useScopedQuery } from './useScopedQuery.js'
 export { useStackInfo } from './utils/stack-info.js'
 export {
   useRow,

package/src/useAtom.ts

@@ -1,8 +1,7 @@
 import type { DerivedMutationHelperFns, QueryInfo } from '@livestore/common'
 import type { DbSchema } from '@livestore/common/schema'
 import type { SqliteDsl } from '@livestore/db-schema'
-import type { GetResult, LiveQueryDef, Store } from '@livestore/livestore'
-import { shouldNeverHappen } from '@livestore/utils'
+import type { LiveQuery } from '@livestore/livestore'
 import React from 'react'
 
 import { useStore } from './LiveStoreContext.js'
@@ -11,27 +10,18 @@ import type { Dispatch, SetStateAction } from './useRow.js'
 
 export const useAtom = <
   // TODO also support colJsonValue
-  TQuery extends LiveQueryDef<any, QueryInfo.Row | QueryInfo.Col>,
+  TQuery extends LiveQuery<any, QueryInfo.Row | QueryInfo.Col>,
 >(
-  queryDef: TQuery,
-  options?: {
-    store?: Store
-  },
-): [value: GetResult<TQuery>, setValue: Dispatch<SetStateAction<Partial<GetResult<TQuery>>>>] => {
-  const queryRef = useQueryRef(queryDef, { store: options?.store })
-  const query$ = queryRef.queryRcRef.value
-
-  // @ts-expect-error runtime check
-  if (query$.queryInfo._tag === 'None') {
-    shouldNeverHappen(`Can't useAtom with a query that has no queryInfo`, queryDef)
-  }
+  query$: TQuery,
+): [value: TQuery['__result!'], setValue: Dispatch<SetStateAction<Partial<TQuery['__result!']>>>] => {
+  const query$Ref = useQueryRef(query$)
 
   const { store } = useStore()
 
   // TODO make API equivalent to useRow
-  const setValue = React.useMemo<Dispatch<SetStateAction<Partial<GetResult<TQuery>>>>>(
-    () => (newValueOrFn: any) => {
-      const newValue = typeof newValueOrFn === 'function' ? newValueOrFn(queryRef.valueRef.current) : newValueOrFn
+  const setValue = React.useMemo<Dispatch<SetStateAction<TQuery['__result!']>>>(() => {
+    return (newValueOrFn: any) => {
+      const newValue = typeof newValueOrFn === 'function' ? newValueOrFn(query$Ref.current) : newValueOrFn
       const table = query$.queryInfo.table as DbSchema.TableDef &
         DerivedMutationHelperFns<SqliteDsl.Columns, DbSchema.TableOptions>
 
@@ -55,9 +45,8 @@ export const useAtom = <
           )
         }
       }
-    },
-    [query$.queryInfo, queryRef.valueRef, store],
-  )
+    }
+  }, [query$.queryInfo, query$Ref, store])
 
-  return [queryRef.valueRef.current, setValue]
+  return [query$Ref.current, setValue]
 }

package/src/useQuery.test.tsx

@@ -1,180 +1,82 @@
-import { makeRef, queryDb } from '@livestore/livestore'
-import * as LiveStore from '@livestore/livestore'
-import { RG } from '@livestore/livestore/internal/testing-utils'
+import { queryDb } from '@livestore/livestore'
 import { Effect, Schema } from '@livestore/utils/effect'
-import { Vitest } from '@livestore/utils/node-vitest'
-import * as ReactTesting from '@testing-library/react'
+import { renderHook } from '@testing-library/react'
 import React from 'react'
-// @ts-expect-error no types
-import * as ReactWindow from 'react-window'
-import { expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 
 import { makeTodoMvcReact, tables, todos } from './__tests__/fixture.js'
 import * as LiveStoreReact from './mod.js'
-import { __resetUseRcResourceCache } from './useRcResource.js'
 
-Vitest.describe.each([{ strictMode: true }, { strictMode: false }] as const)(
-  'useQuery (strictMode=%s)',
-  ({ strictMode }) => {
-    Vitest.afterEach(() => {
-      RG.__resetIds()
-      __resetUseRcResourceCache()
-    })
+describe('useQuery', () => {
+  it('simple', () =>
+    Effect.gen(function* () {
+      const { wrapper, store, makeRenderCount } = yield* makeTodoMvcReact()
 
-    Vitest.scopedLive('simple', () =>
-      Effect.gen(function* () {
-        const { wrapper, store, renderCount } = yield* makeTodoMvcReact({ strictMode })
+      const renderCount = makeRenderCount()
 
-        const allTodos$ = queryDb({ query: `select * from todos`, schema: Schema.Array(tables.todos.schema) })
+      const allTodos$ = queryDb({ query: `select * from todos`, schema: Schema.Array(tables.todos.schema) })
 
-        const { result } = ReactTesting.renderHook(
-          () => {
-            renderCount.inc()
+      const { result } = renderHook(
+        () => {
+          renderCount.inc()
 
-            return LiveStoreReact.useQuery(allTodos$)
-          },
-          { wrapper },
-        )
+          return LiveStoreReact.useQuery(allTodos$)
+        },
+        { wrapper },
+      )
 
-        expect(result.current.length).toBe(0)
-        expect(renderCount.val).toBe(1)
-        expect(store.reactivityGraph.getSnapshot({ includeResults: true })).toMatchSnapshot()
+      expect(result.current.length).toBe(0)
+      expect(renderCount.val).toBe(1)
 
-        console.log('before mutation')
+      React.act(() => store.mutate(todos.insert({ id: 't1', text: 'buy milk', completed: false })))
 
-        ReactTesting.act(() => store.mutate(todos.insert({ id: 't1', text: 'buy milk', completed: false })))
+      expect(result.current.length).toBe(1)
+      expect(result.current[0]!.text).toBe('buy milk')
+      expect(renderCount.val).toBe(2)
+    }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise))
 
-        console.log('after mutation')
+  it('same `useQuery` hook invoked with different queries', () =>
+    Effect.gen(function* () {
+      const { wrapper, store, makeRenderCount } = yield* makeTodoMvcReact()
 
-        expect(result.current.length).toBe(1)
-        expect(result.current[0]!.text).toBe('buy milk')
-        expect(renderCount.val).toBe(2)
-        expect(store.reactivityGraph.getSnapshot({ includeResults: true })).toMatchSnapshot()
-      }),
-    )
-
-    Vitest.scopedLive('same `useQuery` hook invoked with different queries', () =>
-      Effect.gen(function* () {
-        const { wrapper, store, renderCount } = yield* makeTodoMvcReact({ strictMode })
-
-        const todo1$ = queryDb(
-          { query: `select * from todos where id = 't1'`, schema: Schema.Array(tables.todos.schema) },
-          { label: 'libraryTracksView1' },
-        )
-        const todo2$ = queryDb(
-          { query: `select * from todos where id = 't2'`, schema: Schema.Array(tables.todos.schema) },
-          { label: 'libraryTracksView2' },
-        )
-
-        store.mutate(
-          todos.insert({ id: 't1', text: 'buy milk', completed: false }),
-          todos.insert({ id: 't2', text: 'buy eggs', completed: false }),
-        )
-
-        const { result, rerender } = ReactTesting.renderHook(
-          (todoId: string) => {
-            renderCount.inc()
-
-            const query$ = React.useMemo(() => (todoId === 't1' ? todo1$ : todo2$), [todoId])
-
-            return LiveStoreReact.useQuery(query$)[0]!.text
-          },
-          { wrapper, initialProps: 't1' },
-        )
-
-        expect(result.current).toBe('buy milk')
-        expect(renderCount.val).toBe(1)
-        expect(store.reactivityGraph.getSnapshot({ includeResults: true })).toMatchSnapshot('1: after first render')
-
-        ReactTesting.act(() => store.mutate(todos.update({ where: { id: 't1' }, values: { text: 'buy soy milk' } })))
-
-        expect(result.current).toBe('buy soy milk')
-        expect(renderCount.val).toBe(2)
-        expect(store.reactivityGraph.getSnapshot({ includeResults: true })).toMatchSnapshot('2: after first mutation')
-
-        rerender('t2')
-
-        expect(result.current).toBe('buy eggs')
-        expect(renderCount.val).toBe(3)
-        expect(store.reactivityGraph.getSnapshot({ includeResults: true })).toMatchSnapshot('3: after forced rerender')
-      }),
-    )
-
-    Vitest.scopedLive('filtered dependency query', () =>
-      Effect.gen(function* () {
-        const { wrapper, store, renderCount } = yield* makeTodoMvcReact({ strictMode })
-
-        const filter$ = makeRef('t1', { label: 'id-filter' })
-
-        const todo$ = queryDb((get) => tables.todos.query.where('id', get(filter$)), { label: 'todo' })
-
-        store.mutate(
-          todos.insert({ id: 't1', text: 'buy milk', completed: false }),
-          todos.insert({ id: 't2', text: 'buy eggs', completed: false }),
-        )
-
-        const { result } = ReactTesting.renderHook(
-          () => {
-            renderCount.inc()
-
-            return LiveStoreReact.useQuery(todo$)[0]!.text
-          },
-          { wrapper },
-        )
-
-        expect(result.current).toBe('buy milk')
-        expect(renderCount.val).toBe(1)
-        expect(store.reactivityGraph.getSnapshot({ includeResults: true })).toMatchSnapshot()
-
-        ReactTesting.act(() => store.mutate(todos.update({ where: { id: 't1' }, values: { text: 'buy soy milk' } })))
-
-        expect(result.current).toBe('buy soy milk')
-        expect(renderCount.val).toBe(2)
-        expect(store.reactivityGraph.getSnapshot({ includeResults: true })).toMatchSnapshot()
-
-        ReactTesting.act(() => store.setRef(filter$, 't2'))
-
-        expect(result.current).toBe('buy eggs')
-        expect(renderCount.val).toBe(3)
-        expect(store.reactivityGraph.getSnapshot({ includeResults: true })).toMatchSnapshot()
-      }),
-    )
-
-    // NOTE this test covers some special react lifecyle paths which I couldn't easily reproduce without react-window
-    // it basically causes a "query swap" in the `useMemo` and both a `useEffect` cleanup call.
-    // To handle this properly we introduced the `_tag: 'destroyed'` state in the `spanAlreadyStartedCache`.
-    Vitest.scopedLive('should work for a list with react-window', () =>
-      Effect.gen(function* () {
-        const { wrapper } = yield* makeTodoMvcReact({ strictMode })
-
-        const ListWrapper: React.FC<{ numItems: number }> = ({ numItems }) => {
-          return (
-            <ReactWindow.FixedSizeList
-              height={100}
-              width={100}
-              itemSize={10}
-              itemCount={numItems}
-              itemData={Array.from({ length: numItems }, (_, i) => i).reverse()}
-            >
-              {ListItem}
-            </ReactWindow.FixedSizeList>
-          )
-        }
-
-        const ListItem: React.FC<{ data: ReadonlyArray<number>; index: number }> = ({ data: ids, index }) => {
-          const id = ids[index]!
-          const res = LiveStoreReact.useQuery(LiveStore.computed(() => id, { label: `ListItem.${id}`, deps: id }))
-          return <div role="listitem">{res}</div>
-        }
-
-        const renderResult = ReactTesting.render(<ListWrapper numItems={1} />, { wrapper })
-
-        expect(renderResult.container.textContent).toBe('0')
-
-        renderResult.rerender(<ListWrapper numItems={2} />)
-
-        expect(renderResult.container.textContent).toBe('10')
-      }),
-    )
-  },
-)
+      const renderCount = makeRenderCount()
+
+      const todo1$ = queryDb(
+        { query: `select * from todos where id = 't1'`, schema: Schema.Array(tables.todos.schema) },
+        { label: 'libraryTracksView1' },
+      )
+      const todo2$ = queryDb(
+        { query: `select * from todos where id = 't2'`, schema: Schema.Array(tables.todos.schema) },
+        { label: 'libraryTracksView2' },
+      )
+
+      store.mutate(
+        todos.insert({ id: 't1', text: 'buy milk', completed: false }),
+        todos.insert({ id: 't2', text: 'buy eggs', completed: false }),
+      )
+
+      const { result, rerender } = renderHook(
+        (todoId: string) => {
+          renderCount.inc()
+
+          const query$ = React.useMemo(() => (todoId === 't1' ? todo1$ : todo2$), [todoId])
+
+          return LiveStoreReact.useQuery(query$)[0]!.text
+        },
+        { wrapper, initialProps: 't1' },
+      )
+
+      expect(result.current).toBe('buy milk')
+      expect(renderCount.val).toBe(1)
+
+      React.act(() => store.mutate(todos.update({ where: { id: 't1' }, values: { text: 'buy soy milk' } })))
+
+      expect(result.current).toBe('buy soy milk')
+      expect(renderCount.val).toBe(2)
+
+      rerender('t2')
+
+      expect(result.current).toBe('buy eggs')
+      expect(renderCount.val).toBe(3)
+    }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise))
+})

package/src/useQuery.ts

@@ -1,51 +1,38 @@
-import type { GetResult, LiveQuery, LiveQueryDef, LiveQueryDefAny, RcRef, Store } from '@livestore/livestore'
+import type { GetResult, LiveQueryAny } from '@livestore/livestore'
 import { extractStackInfoFromStackTrace, stackInfoToString } from '@livestore/livestore'
 import { deepEqual, indent } from '@livestore/utils'
 import * as otel from '@opentelemetry/api'
 import React from 'react'
 
 import { useStore } from './LiveStoreContext.js'
-import { useRcResource } from './useRcResource.js'
 import { originalStackLimit } from './utils/stack-info.js'
 import { useStateRefWithReactiveInput } from './utils/useStateRefWithReactiveInput.js'
 
 /**
- * Returns the result of a query and subscribes to future updates.
- *
- * Example:
- * ```tsx
- * const App = () => {
- *   const todos = useQuery(queryDb(tables.todos.query.where({ complete: true })))
- *   return <div>{todos.map((todo) => <div key={todo.id}>{todo.title}</div>)}</div>
- * }
- * ```
+ * NOTE Some folks have suggested to use `React.useSyncExternalStore`, however, it's not doing anything special
+ * for what's needed here, so we handle everything manually.
  */
-export const useQuery = <TQuery extends LiveQueryDefAny>(
-  queryDef: TQuery,
-  options?: { store?: Store },
-): GetResult<TQuery> => useQueryRef(queryDef, options).valueRef.current
 
-type GetQueryInfo<TQuery extends LiveQueryDefAny> =
-  TQuery extends LiveQueryDef<infer _1, infer TQueryInfo> ? TQueryInfo : never
+/**
+ * This is needed because the `React.useMemo` call below, can sometimes be called multiple times 🤷,
+ * so we need to "cache" the fact that we've already started a span for this component.
+ * The map entry is being removed again in the `React.useEffect` call below.
+ */
+const spanAlreadyStartedCache = new Map<LiveQueryAny, { span: otel.Span; otelContext: otel.Context }>()
+
+export const useQuery = <TQuery extends LiveQueryAny>(query: TQuery): GetResult<TQuery> => useQueryRef(query).current
 
 /**
+ *
  */
-export const useQueryRef = <TQuery extends LiveQueryDefAny>(
-  queryDef: TQuery,
-  options?: {
-    store?: Store
-    /** Parent otel context for the query */
-    otelContext?: otel.Context
-    /** The name of the span to use for the query */
-    otelSpanName?: string
-  },
-): {
-  valueRef: React.RefObject<GetResult<TQuery>>
-  queryRcRef: RcRef<LiveQuery<GetResult<TQuery>, GetQueryInfo<TQuery>>>
-} => {
-  const { store } = useStore({ store: options?.store })
-
-  const rcRefKey = `${store.storeId}_${queryDef.hash}`
+export const useQueryRef = <TQuery extends LiveQueryAny>(
+  query$: TQuery,
+  parentOtelContext?: otel.Context,
+): React.MutableRefObject<GetResult<TQuery>> => {
+  const { store } = useStore()
+
+  React.useDebugValue(`LiveStore:useQuery:${query$.id}:${query$.label}`)
+  // console.debug(`LiveStore:useQuery:${query$.id}:${query$.label}`)
 
   const stackInfo = React.useMemo(() => {
     Error.stackTraceLimit = 10
@@ -55,42 +42,31 @@ export const useQueryRef = <TQuery extends LiveQueryDefAny>(
     return extractStackInfoFromStackTrace(stack)
   }, [])
 
-  const { queryRcRef, span, otelContext } = useRcResource(
-    rcRefKey,
-    () => {
-      const queryDefLabel = queryDef.label
-
-      const span = store.otel.tracer.startSpan(
-        options?.otelSpanName ?? `LiveStore:useQuery:${queryDefLabel}`,
-        { attributes: { label: queryDefLabel, firstStackInfo: JSON.stringify(stackInfo) } },
-        options?.otelContext ?? store.otel.queriesSpanContext,
-      )
+  // The following `React.useMemo` and `React.useEffect` calls are used to start and end a span for the lifetime of this component.
+  const { span, otelContext } = React.useMemo(() => {
+    const existingSpan = spanAlreadyStartedCache.get(query$)
+    if (existingSpan !== undefined) return existingSpan
 
-      const otelContext = otel.trace.setSpan(otel.context.active(), span)
+    const span = store.otel.tracer.startSpan(
+      `LiveStore:useQuery:${query$.label}`,
+      { attributes: { label: query$.label, stackInfo: JSON.stringify(stackInfo) } },
+      parentOtelContext ?? store.otel.queriesSpanContext,
+    )
 
-      const queryRcRef = queryDef.make(store.reactivityGraph.context!, otelContext)
+    const otelContext = otel.trace.setSpan(otel.context.active(), span)
 
-      return { queryRcRef, span, 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
-    () => {},
-  )
-  const query$ = queryRcRef.value as LiveQuery<GetResult<TQuery>, GetQueryInfo<TQuery>>
+    spanAlreadyStartedCache.set(query$, { span, otelContext })
 
-  React.useDebugValue(`LiveStore:useQuery:${query$.id}:${query$.label}`)
-  // console.debug(`LiveStore:useQuery:${query$.id}:${query$.label}`)
+    return { span, otelContext }
+  }, [parentOtelContext, query$, stackInfo, store.otel.queriesSpanContext, store.otel.tracer])
 
   const initialResult = React.useMemo(() => {
     try {
-      return query$.run({
-        otelContext,
-        debugRefreshReason: {
-          _tag: 'react',
-          api: 'useQuery',
-          label: `useQuery:initial-run:${query$.label}`,
-          stackInfo,
-        },
+      return query$.run(otelContext, {
+        _tag: 'react',
+        api: 'useQuery',
+        label: query$.label,
+        stackInfo,
       })
     } catch (cause: any) {
       throw new Error(
@@ -113,20 +89,25 @@ Stack trace:
   // 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<GetResult<TQuery>>(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
+  React.useEffect(
+    () => () => {
+      spanAlreadyStartedCache.delete(query$)
+      span.end()
+    },
+    [query$, span],
+  )
 
   // 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,
     // so we're also updating the span name here.
-    span.updateName(options?.otelSpanName ?? `LiveStore:useQuery:${query$.label}`)
+    span.updateName(`LiveStore:useQuery:${query$.label}`)
 
-    return store.subscribe(query$, {
-      onUpdate: (newValue) => {
+    return store.subscribe(
+      query$,
+      (newValue) => {
         // NOTE: we return a reference to the result object within LiveStore;
         // this implies that app code must not mutate the results, or else
         // there may be weird reactivity bugs.
@@ -134,23 +115,12 @@ Stack trace:
           setValue(newValue)
         }
       },
-      onUnsubsubscribe: () => {
+      () => {
         query$.activeSubscriptions.delete(stackInfo)
       },
-      label: query$.label,
-      otelContext,
-    })
-  }, [stackInfo, query$, setValue, store, valueRef, otelContext, span, options?.otelSpanName])
-
-  useRcResource(
-    rcRefKey,
-    () => ({ queryRcRef, span }),
-    ({ queryRcRef, span }) => {
-      // console.debug('deref', queryRcRef.value.id, queryRcRef.value.label)
-      queryRcRef.deref()
-      span.end()
-    },
-  )
+      { label: query$.label, otelContext },
+    )
+  }, [stackInfo, query$, setValue, store, valueRef, otelContext, span])
 
-  return { valueRef, queryRcRef }
+  return valueRef
 }