Make some adjustments to work with the new implementation, add tests

MatiPl01 · MatiPl01 · commit e7de4569fada · 2026-04-15T20:14:49.000+02:00
diff --git a/packages/react-native-reanimated/src/hook/__tests__/useHandler.test.tsx b/packages/react-native-reanimated/src/hook/__tests__/useHandler.test.tsx
@@ -1,8 +1,16 @@
 'use strict';
 
 import { worklet } from '../../jestUtils';
+import { useIsFastRefresh } from '../utils';
 import { renderUseHandler, runCommonTests } from './useHandler.shared';
 
+jest.mock('../utils', () => ({
+  ...jest.requireActual('../utils'),
+  useIsFastRefresh: jest.fn(() => false),
+}));
+
+const mockFastRefresh = useIsFastRefresh as jest.Mock;
+
 function nonWorkletError(...names: string[]) {
   return new Error(
     `[Reanimated] Passed handlers that are not worklets. Only worklet functions are allowed. Handlers "${names.join(', ')}" are not worklets.`
@@ -88,4 +96,39 @@ describe('useHandler (native)', () => {
       expect(result.current.doDependenciesDiffer).toBe(true);
     });
   });
+
+  describe('fast refresh', () => {
+    test('flips doDependenciesDiffer to true even when worklet is unchanged', () => {
+      const w = worklet();
+      const { result, rerender } = renderUseHandler({ onScroll: w });
+
+      // We expect doDependenciesDiffer to be true on the first render.
+      expect(result.current.doDependenciesDiffer).toBe(true);
+
+      // Rerender with the same worklet handler - doDependenciesDiffer should be false.
+      rerender({ handlers: { onScroll: w } });
+      expect(result.current.doDependenciesDiffer).toBe(false);
+
+      // Next render is a fast refresh - doDependenciesDiffer should be true (behave as if it was a first render).
+      mockFastRefresh.mockReturnValueOnce(true);
+      rerender({ handlers: { onScroll: w } });
+      expect(result.current.doDependenciesDiffer).toBe(true);
+
+      // Subsequent renders return to normal behavior - doDependenciesDiffer should be false.
+      rerender({ handlers: { onScroll: w } });
+      expect(result.current.doDependenciesDiffer).toBe(false);
+    });
+
+    test('context is reinitialized after fast refresh', () => {
+      const w = worklet();
+      const { result, rerender } = renderUseHandler({ onScroll: w });
+
+      const firstContext = result.current.context;
+
+      mockFastRefresh.mockReturnValueOnce(true);
+      rerender({ handlers: { onScroll: w } });
+
+      expect(result.current.context).not.toBe(firstContext);
+    });
+  });
 });
diff --git a/packages/react-native-reanimated/src/hook/__tests__/useHandler.web.test.tsx b/packages/react-native-reanimated/src/hook/__tests__/useHandler.web.test.tsx
@@ -1,7 +1,15 @@
 'use strict';
 
+import { useIsFastRefresh } from '../utils';
 import { renderUseHandler, runCommonTests } from './useHandler.shared';
 
+jest.mock('../utils', () => ({
+  ...jest.requireActual('../utils'),
+  useIsFastRefresh: jest.fn(() => false),
+}));
+
+const mockFastRefresh = useIsFastRefresh as jest.Mock;
+
 describe('useHandler (web)', () => {
   runCommonTests();
 
@@ -94,4 +102,84 @@ describe('useHandler (web)', () => {
       });
     });
   });
+
+  describe('fast refresh', () => {
+    describe('without babel plugin', () => {
+      const fastRefreshCases: Array<{
+        caseName: string;
+        initialDeps: number[] | undefined;
+        nextDeps: number[] | undefined;
+        expected: [boolean, boolean, boolean, boolean];
+      }> = [
+        {
+          caseName: 'undefined deps',
+          initialDeps: undefined,
+          nextDeps: undefined,
+          expected: [true, true, true, true],
+        },
+        {
+          caseName: 'empty deps array',
+          initialDeps: [],
+          nextDeps: [],
+          expected: [false, false, true, false],
+        },
+        {
+          caseName: 'non-empty deps array',
+          initialDeps: [1],
+          nextDeps: [1],
+          expected: [true, false, true, false],
+        },
+        {
+          caseName: 'changing deps between renders',
+          initialDeps: [1],
+          nextDeps: [2],
+          expected: [true, true, true, false],
+        },
+      ];
+
+      fastRefreshCases.forEach(
+        ({
+          caseName,
+          initialDeps,
+          nextDeps,
+          expected: [
+            firstRenderValue,
+            secondRenderValue,
+            fastRefreshValue,
+            postRefreshValue,
+          ],
+        }) => {
+          test(`handles fast-refresh behavior for ${caseName}`, () => {
+            const handler = jest.fn();
+            const { result, rerender } = renderUseHandler(
+              { onScroll: handler },
+              initialDeps
+            );
+
+            // Initial render.
+            expect(result.current.doDependenciesDiffer).toBe(firstRenderValue);
+
+            // Second render can keep deps stable or change them.
+            rerender({ handlers: { onScroll: handler }, deps: nextDeps });
+            expect(result.current.doDependenciesDiffer).toBe(secondRenderValue);
+
+            // Fast refresh render.
+            mockFastRefresh.mockReturnValueOnce(true);
+            rerender({ handlers: { onScroll: handler }, deps: nextDeps });
+            expect(result.current.doDependenciesDiffer).toBe(fastRefreshValue);
+
+            // Post-fast-refresh render.
+            rerender({ handlers: { onScroll: handler }, deps: nextDeps });
+            expect(result.current.doDependenciesDiffer).toBe(postRefreshValue);
+          });
+        }
+      );
+
+      test('first-mount `[]` spec is still preserved (no false positive)', () => {
+        // Guard against false positives on initial mount with [] deps.
+        const { result } = renderUseHandler({ onScroll: jest.fn() }, []);
+        expect(result.current.doDependenciesDiffer).toBe(false);
+      });
+    });
+  });
 });
diff --git a/packages/react-native-reanimated/src/hook/useHandler.ts b/packages/react-native-reanimated/src/hook/useHandler.ts
@@ -7,6 +7,7 @@ import type { WorkletClosure } from 'react-native-worklets/lib/typescript/types'
 import type { UnknownRecord } from '../common';
 import { IS_WEB } from '../common';
 import type { DependencyList, ReanimatedEvent } from './commonTypes';
+import { useIsFastRefresh } from './utils';
 
 interface GeneralHandler<
   TEvent extends object,
@@ -147,11 +148,25 @@ export function useHandler<Event extends object, Context extends UnknownRecord>(
     prevDependencies: DependencyList;
   } | null>(null);
 
+  // On fast refresh we want the hook to behave as a first render rather
+  // than a re-render, so `doDependenciesDiffer` is reported as true and
+  // consumers can rebuild native bindings tied to pre-refresh JS identities.
+  // See https://github.com/software-mansion/react-native-reanimated/pull/9075.
+  const isFastRefresh = useIsFastRefresh();
+  if (isFastRefresh) {
+    stateRef.current = null;
+  }
+
   if (stateRef.current === null) {
     stateRef.current = {
       context: makeShareable({} as Context),
       prevHandlers: undefined,
-      prevDependencies: [],
+      // Only matters on the web/no-plugin path, where `areDependenciesEqual`
+      // drives the result. Without the ternary, `deps=[]` consumers would
+      // miss the fast-refresh behavior because `areDependenciesEqual([], [])`
+      // is true. `undefined` ensures that the comparison returns `true` so
+      // that consumers can re-register handlers.
+      prevDependencies: isFastRefresh ? undefined : [],
     };
   }
 
diff --git a/packages/react-native-reanimated/src/hook/utils.ts b/packages/react-native-reanimated/src/hook/utils.ts
@@ -1,4 +1,29 @@
 'use strict';
+import { useMemo, useRef } from 'react';
+
+/**
+ * Returns `true` on the render immediately following a fast refresh.
+ *
+ * Relies on `useMemo`'s cached value being reset when the component's hook
+ * signature is refreshed while `useRef` is preserved - a mismatch between the
+ * two proves the module was re-executed. Always `false` outside `__DEV__` since
+ * fast refresh is a development-only mechanism.
+ */
+/* eslint-disable react-hooks/rules-of-hooks -- __DEV__ is build-constant */
+export function useIsFastRefresh(): boolean {
+  'use no memo';
+  if (!__DEV__) {
+    return false;
+  }
+  const signal = useMemo(() => ({}), []);
+  const prev = useRef(signal);
+  if (prev.current === signal) {
+    return false;
+  }
+  prev.current = signal;
+  return true;
+}
+/* eslint-enable react-hooks/rules-of-hooks */
 
 export function isAnimated(prop: unknown) {
   'worklet';
