Prevent initializers from being tracked

src/__tests__/component.test.tsx

@@ -6,6 +6,7 @@ import {
   reactive,
   ref,
   useComputed,
+  useReactive,
   useReference,
   useWatch,
   useWatchEffect,
@@ -191,6 +192,35 @@ describe('makeReactive', () => {
       expect(content).toBeTruthy();
     });
   });
+  it('does not re-render when state changes in initializer', async () => {
+    const count = ref(0);
+    const mockInitializer = jest.fn(() => ({ a: count.value, b: 2 }));
+
+    const Tester = makeReactive(function Tester() {
+      const obj = useReactive(mockInitializer);
+      return <p>{obj.a}</p>;
+    });
+
+    const { renderCount } = perf(React);
+
+    const { findByText } = render(<Tester />);
+
+    expect(mockInitializer).toBeCalledTimes(1);
+    const content = await findByText('0');
+    expect(content).toBeTruthy();
+
+    act(() => {
+      count.value++;
+    });
+
+    await wait(async () => {
+      // should not re-render, but should trigger effect again
+      expect(renderCount.current.Tester).toBeRenderedTimes(1);
+      expect(mockInitializer).toBeCalledTimes(1);
+      const content = await findByText('0');
+      expect(content).toBeTruthy();
+    });
+  });
   it('does not re-render when state changes in nested watcher', async () => {
     const obj = reactive({ a: 1, b: 2 });
     const mockEffect = jest.fn();

src/advanced.ts

@@ -7,7 +7,7 @@ import {
   shallowReadonly,
   shallowRef,
 } from '@vue/reactivity';
-import { isFunction } from './helper';
+import { invokeUntracked, isFunction } from './helper';
 import { useRef } from 'react';
 
 export {
@@ -49,7 +49,9 @@ export {
 export const useShallowRef = <T>(value: T | (() => T)): ShallowRef<T> => {
   const reactiveRef = useRef<ShallowRef<T> | null>(null);
   if (reactiveRef.current === null) {
-    reactiveRef.current = shallowRef(isFunction(value) ? value() : value);
+    reactiveRef.current = shallowRef(
+      isFunction(value) ? invokeUntracked(value) : value
+    );
   }
   return reactiveRef.current;
 };
@@ -121,7 +123,7 @@ export const useShallowReactive = <T extends object>(
   const reactiveRef = useRef<T | null>(null);
   if (reactiveRef.current === null) {
     reactiveRef.current = shallowReactive(
-      isFunction(target) ? target() : target
+      isFunction(target) ? invokeUntracked(target) : target
     );
   }
   return reactiveRef.current;
@@ -173,7 +175,7 @@ export const useShallowReadonly = <T extends object>(
   const reactiveRef = useRef<Readonly<T> | null>(null);
   if (reactiveRef.current === null) {
     reactiveRef.current = shallowReadonly(
-      isFunction(target) ? target() : target
+      isFunction(target) ? invokeUntracked(target) : target
     );
   }
   return reactiveRef.current;

src/core.ts

@@ -21,7 +21,13 @@ import {
   readonly,
   ref,
 } from '@vue/reactivity';
-import { getFiberInDev, hasChanged, isFunction, traverse } from './helper';
+import {
+  getFiberInDev,
+  hasChanged,
+  invokeUntracked,
+  isFunction,
+  traverse,
+} from './helper';
 import { useEffect, useRef } from 'react';
 import messages from './messages';
 
@@ -51,7 +57,9 @@ export { ref, computed, reactive, readonly } from '@vue/reactivity';
 export const useReference = <T>(value: T | (() => T)): Ref<UnwrapRef<T>> => {
   const reactiveRef = useRef<Ref<UnwrapRef<T>> | null>(null);
   if (reactiveRef.current === null) {
-    reactiveRef.current = ref(isFunction(value) ? value() : value);
+    reactiveRef.current = ref(
+      isFunction(value) ? invokeUntracked(value) : value
+    );
   }
   return reactiveRef.current;
 };
@@ -182,7 +190,9 @@ export const useReactive = <T extends object>(
 ): UnwrapNestedRefs<T> => {
   const reactiveRef = useRef<UnwrapNestedRefs<T> | null>(null);
   if (reactiveRef.current === null) {
-    reactiveRef.current = reactive(isFunction(target) ? target() : target);
+    reactiveRef.current = reactive(
+      isFunction(target) ? invokeUntracked(target) : target
+    );
   }
   return reactiveRef.current;
 };
@@ -231,7 +241,9 @@ export const useReadonly = <T extends object>(
 ): DeepReadonly<UnwrapNestedRefs<T>> => {
   const reactiveRef = useRef<DeepReadonly<UnwrapNestedRefs<T>> | null>(null);
   if (reactiveRef.current === null) {
-    reactiveRef.current = readonly(isFunction(target) ? target() : target);
+    reactiveRef.current = readonly(
+      isFunction(target) ? invokeUntracked(target) : target
+    );
   }
   return reactiveRef.current;
 };

src/helper.ts

@@ -1,4 +1,9 @@
-import { ReactiveFlags, isRef } from '@vue/reactivity';
+import {
+  ReactiveFlags,
+  isRef,
+  pauseTracking,
+  resetTracking,
+} from '@vue/reactivity';
 import { __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED as SecretInternals } from 'react';
 
 declare module 'react' {
@@ -64,3 +69,12 @@ export function traverse(value: unknown, seen?: Set<unknown>) {
   }
   return value;
 }
+
+export function invokeUntracked<T extends (...args: any[]) => any>(
+  initializer: T
+): ReturnType<T> {
+  pauseTracking();
+  const ret = initializer();
+  resetTracking();
+  return ret;
+}