fix: signaldb-react in strict mode

packages/react/__tests__/useReactivity.spec.ts

@@ -2,6 +2,7 @@
 import { vi, it, expect } from 'vitest'
 import { renderHook, waitFor } from '@testing-library/react'
 import { signal, onDispose, effect } from '@maverick-js/signals'
+import { StrictMode } from 'react'
 import { createUseReactivityHook } from '../src'
 
 function reactiveHelper<T>(initialValue: T) {
@@ -42,6 +43,27 @@ it('should rerun with reactive data', async () => {
  expect(dispose).toBeCalledTimes(2)
 })
 
+it('should rerun in strict mode', async () => {
+ const reactive = reactiveHelper(1)
+ const dispose = vi.fn()
+ const fn = vi.fn().mockImplementation(() => {
+ onDispose(dispose)
+ return reactive.get()
+ })
+ const { result, unmount } = renderHook(() => useReactivity(fn), {
+ wrapper: StrictMode,
+ })
+ await waitFor(async () => expect(await result.current).toBe(1))
+ expect(fn).toBeCalledTimes(3)
+
+ reactive.set(2)
+ await waitFor(async () => expect(await result.current).toBe(2))
+ expect(fn).toBeCalledTimes(5)
+ expect(dispose).toBeCalledTimes(3)
+ unmount()
+ expect(dispose).toBeCalledTimes(4)
+})
+
 it('should rerun with reactive data and dependencies', async () => {
  const reactive = reactiveHelper(1)
  const dispose = vi.fn()

packages/react/package.json

@@ -1,6 +1,6 @@
 {
  "name": "signaldb-react",
- "version": "1.0.0",
+ "version": "1.0.1",
  "description": "SignalDB is a client-side database that provides a simple MongoDB-like interface to the data with first-class typescript support to achieve an optimistic UI. Data persistence can be achieved by using storage providers that store the data through a JSON interface to places such as localStorage.",
  "scripts": {
  "build": "rimraf dist && vite build"

packages/react/src/index.ts

@@ -25,22 +25,30 @@ export function createUseReactivityHook(effect: ReactiveEffect) {
  }>({
  isMounted: true,
  })
-
- useMemo(() => {
- if (!refs.current.isMounted) return
- if (refs.current.stopComputation) refs.current.stopComputation()
+ const ensureComputation = () => {
+ if (refs.current.stopComputation) {
+ refs.current.stopComputation()
+ refs.current.stopComputation = undefined
+ }
  refs.current.stopComputation = effect(() => {
  refs.current.data = reactiveFn()
  forceUpdate()
  })
+ }
+
+ useMemo(() => {
+ if (!refs.current.isMounted) return
+ ensureComputation()
  }, deps || [])
 
  useEffect(() => {
  refs.current.isMounted = true
+ if (!refs.current.stopComputation) ensureComputation()
  return () => {
  refs.current.isMounted = false
  if (!refs.current.stopComputation) return
  refs.current.stopComputation()
+ refs.current.stopComputation = undefined
  }
  }, [])
  return refs.current.data as T