std-react-bindings 0.0.1

package/src/utility-hooks/__tests__/use-callback-ref.test.tsx

@@ -0,0 +1,59 @@
+import { waitFor } from '@testing-library/react';
+import React, { useCallback, useEffect, useRef } from 'react';
+
+import { runInDom } from '../../__test_dependency__';
+import { useBinding } from '../../binding/use-binding';
+import { BindingsConsumer } from '../../components/BindingsConsumer';
+import { useCallbackRef } from '../use-callback-ref';
+
+describe('useCallbackRef', () => {
+  it("useCallbackRef changes shouldn't cause useEffect to rerun, unlike regular useCallback changes", () =>
+    runInDom(({ onMount }) => {
+      const value = useBinding(() => 0, { id: 'value' });
+
+      const numUseEffectCallsWithRegularCallback = useRef(0);
+      const lastValueInUseEffectWithRegularCallback = useRef<number | undefined>(undefined);
+
+      const numUseEffectCallsWithCallbackRef = useRef(0);
+      const lastValueInUseEffectWithCallbackRef = useRef<number | undefined>(undefined);
+
+      const MyComponent = ({ value }: { value: number }) => {
+        const callback = useCallback(() => value + 1, [value]);
+        const callbackRef = useCallbackRef(() => value + 1);
+
+        useEffect(() => {
+          numUseEffectCallsWithRegularCallback.current += 1;
+          lastValueInUseEffectWithRegularCallback.current = callback();
+        }, [callback]);
+
+        useEffect(() => {
+          numUseEffectCallsWithCallbackRef.current += 1;
+          lastValueInUseEffectWithCallbackRef.current = callbackRef();
+        }, [callbackRef]);
+
+        return (
+          <span>
+            {callback()}-{callbackRef()}
+          </span>
+        );
+      };
+
+      onMount(async (rootElement) => {
+        expect(numUseEffectCallsWithRegularCallback.current).toBe(1);
+        expect(lastValueInUseEffectWithRegularCallback.current).toBe(1);
+        expect(numUseEffectCallsWithCallbackRef.current).toBe(1);
+        expect(lastValueInUseEffectWithCallbackRef.current).toBe(1);
+        expect(rootElement.innerHTML).toBe('<div><span>1-1</span></div>');
+
+        value.set(2);
+        await waitFor(() => expect(rootElement.innerHTML).toBe('<div><span>3-3</span></div>'));
+
+        expect(numUseEffectCallsWithRegularCallback.current).toBe(2);
+        expect(lastValueInUseEffectWithRegularCallback.current).toBe(3);
+        expect(numUseEffectCallsWithCallbackRef.current).toBe(1);
+        expect(lastValueInUseEffectWithCallbackRef.current).toBe(1);
+      });
+
+      return <BindingsConsumer bindings={{ value }}>{({ value }) => <MyComponent value={value} />}</BindingsConsumer>;
+    }));
+});

package/src/utility-hooks/__tests__/use-stable-value.test.tsx

@@ -0,0 +1,49 @@
+import { jest } from '@jest/globals';
+import { waitFor } from '@testing-library/react';
+import type { ComponentType } from 'react';
+import React from 'react';
+
+import { runInDom } from '../../__test_dependency__';
+import { useBinding } from '../../binding/use-binding';
+import { BindingsConsumer } from '../../components/BindingsConsumer';
+import { useStableValue } from '../use-stable-value';
+
+describe('useStableValue', () => {
+  it('stable values should only change when they change according to areEqual', () =>
+    runInDom(({ onMount }) => {
+      const value = useBinding(() => 0, { id: 'value' });
+
+      let stabilized:
+        | {
+            value: number;
+            somethingElse: number;
+          }
+        | undefined;
+      const MyComponent: ComponentType<{ value: number }> = jest.fn(({ value }: { value: number }) => {
+        stabilized = useStableValue({ value, somethingElse: 3 });
+
+        return <span>{value}</span>;
+      });
+
+      onMount(async () => {
+        expect(MyComponent).toHaveBeenCalledTimes(1);
+
+        const firstStabilized = stabilized;
+        expect(stabilized).toMatchObject({ value: 0, somethingElse: 3 });
+
+        value.set(0);
+        await waitFor(() => expect(MyComponent).toHaveBeenCalledTimes(2));
+
+        expect(stabilized).toBe(firstStabilized);
+        expect(stabilized).toMatchObject({ value: 0, somethingElse: 3 });
+
+        value.set(1);
+        await waitFor(() => expect(MyComponent).toHaveBeenCalledTimes(3));
+
+        expect(stabilized).not.toBe(firstStabilized);
+        expect(stabilized).toMatchObject({ value: 1, somethingElse: 3 });
+      });
+
+      return <BindingsConsumer bindings={{ value }}>{({ value }) => <MyComponent value={value} />}</BindingsConsumer>;
+    }));
+});

package/src/utility-hooks/exports.ts

@@ -0,0 +1,2 @@
+export * from './use-callback-ref';
+export * from './use-stable-value';

package/src/utility-hooks/use-callback-ref.ts

@@ -0,0 +1,15 @@
+import type { DependencyList } from 'react';
+import React, { useRef } from 'react';
+
+const noDeps: DependencyList = Object.freeze([]);
+
+/** Creates a wrapper function that can be updated on each render without updating the resulting function */
+export const useCallbackRef = <ArgsT extends any[], ReturnT>(func: (...args: ArgsT) => ReturnT) => {
+  const latest = useRef<(...args: ArgsT) => ReturnT>(func);
+  latest.current = func;
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const caller = React.useCallback((...args: ArgsT): ReturnT => latest.current(...args), noDeps);
+
+  return caller;
+};

package/src/utility-hooks/use-stable-value.ts

@@ -0,0 +1,17 @@
+import { useRef } from 'react';
+
+import { areEqual } from '../config/are-equal';
+
+/**
+ * Remembers the specified value across renders and compares it against a stored value, which is returned.  The stored value is only updated
+ * if the specified value really changes, using `areEqual` to compare.
+ */
+export const useStableValue = <T>(instableValue: T) => {
+  const stableValue = useRef<T>(instableValue);
+
+  if (!areEqual(instableValue, stableValue.current)) {
+    stableValue.current = instableValue;
+  }
+
+  return stableValue.current;
+};