feat(brownie): add selector and equality fn support to useBrownieStore

okwasniewski · okwasniewski · commit 36d07210bf2a · 2026-01-09T13:17:15.000+01:00
diff --git a/apps/TesterIntegrated/App.tsx b/apps/TesterIntegrated/App.tsx
@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { StyleSheet, Text, View, Button, TextInput } from 'react-native';
-import { useBrownieStore } from '@callstack/brownie';
+import { useBrownieStore, shallow } from '@callstack/brownie';
 import {
   createNativeStackNavigator,
   type NativeStackScreenProps,
@@ -34,7 +34,11 @@ const theme = getRandomTheme();
 
 function HomeScreen({ navigation, route }: HomeScreenProps) {
   const colors = route.params?.theme || theme;
-  const [state, setState] = useBrownieStore('BrownfieldStore');
+  const [counter, setState] = useBrownieStore(
+    'BrownfieldStore',
+    (s) => s.counter
+  );
+  const [user] = useBrownieStore('BrownfieldStore', (s) => s.user, shallow);
 
   useEffect(() => {
     const unsubscribe = navigation.addListener('focus', () => {
@@ -51,12 +55,12 @@ function HomeScreen({ navigation, route }: HomeScreenProps) {
       </Text>
 
       <Text style={[styles.text, { color: colors.secondary }]}>
-        Count: {state.counter}
+        Count: {counter}
       </Text>
 
       <TextInput
         style={styles.input}
-        value={state.user.name}
+        value={user.name}
         onChangeText={(text) =>
           setState((prev) => ({ user: { ...prev.user, name: text } }))
         }
diff --git a/packages/brownie/jest.config.js b/packages/brownie/jest.config.js
@@ -1,16 +1,41 @@
 /** @type {import('jest').Config} */
 module.exports = {
-  preset: 'ts-jest',
-  testEnvironment: 'node',
-  testMatch: ['<rootDir>/scripts/**/*.test.ts'],
-  moduleFileExtensions: ['ts', 'js'],
-  clearMocks: true,
-  transform: {
-    '^.+\\.ts$': [
-      'ts-jest',
-      {
-        tsconfig: '<rootDir>/scripts/__tests__/tsconfig.json',
+  projects: [
+    {
+      displayName: 'scripts',
+      preset: 'ts-jest',
+      testEnvironment: 'node',
+      testMatch: ['<rootDir>/scripts/**/*.test.ts'],
+      moduleFileExtensions: ['ts', 'js'],
+      clearMocks: true,
+      transform: {
+        '^.+\\.ts$': [
+          'ts-jest',
+          {
+            tsconfig: '<rootDir>/scripts/__tests__/tsconfig.json',
+          },
+        ],
       },
-    ],
-  },
+    },
+    {
+      displayName: 'src',
+      preset: 'ts-jest',
+      testEnvironment: 'node',
+      testMatch: ['<rootDir>/src/**/*.test.ts'],
+      moduleFileExtensions: ['ts', 'js'],
+      clearMocks: true,
+      moduleNameMapper: {
+        '^./NativeBrownieModule$':
+          '<rootDir>/src/__tests__/__mocks__/NativeBrownieModule.ts',
+      },
+      transform: {
+        '^.+\\.ts$': [
+          'ts-jest',
+          {
+            tsconfig: '<rootDir>/src/__tests__/tsconfig.json',
+          },
+        ],
+      },
+    },
+  ],
 };
diff --git a/packages/brownie/package.json b/packages/brownie/package.json
@@ -63,7 +63,8 @@
   "dependencies": {
     "quicktype-core": "^23.0.170",
     "quicktype-typescript-input": "^23.0.170",
-    "ts-morph": "^25.0.0"
+    "ts-morph": "^25.0.0",
+    "use-sync-external-store": "^1.4.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
@@ -74,6 +75,7 @@
     "@types/jest": "^29.5.14",
     "@types/node": "^22.0.0",
     "@types/react": "^19.1.1",
+    "@types/use-sync-external-store": "^0.0.6",
     "jest": "^29.7.0",
     "react": "19.1.1",
     "react-native": "0.82.1",
diff --git a/packages/brownie/src/__tests__/__mocks__/NativeBrownieModule.ts b/packages/brownie/src/__tests__/__mocks__/NativeBrownieModule.ts
@@ -0,0 +1,3 @@
+export default {
+  nativeStoreDidChange: jest.fn(),
+};
diff --git a/packages/brownie/src/__tests__/shallow.test.ts b/packages/brownie/src/__tests__/shallow.test.ts
@@ -0,0 +1,96 @@
+import { shallow } from '../shallow';
+
+describe('shallow', () => {
+  it('returns true for identical primitives', () => {
+    expect(shallow(1, 1)).toBe(true);
+    expect(shallow('a', 'a')).toBe(true);
+    expect(shallow(true, true)).toBe(true);
+    expect(shallow(null, null)).toBe(true);
+    expect(shallow(undefined, undefined)).toBe(true);
+  });
+
+  it('returns false for different primitives', () => {
+    expect(shallow(1, 2)).toBe(false);
+    expect(shallow('a', 'b')).toBe(false);
+    expect(shallow(true, false)).toBe(false);
+  });
+
+  it('returns true for same object reference', () => {
+    const obj = { a: 1 };
+    expect(shallow(obj, obj)).toBe(true);
+  });
+
+  it('returns true for objects with same top-level values', () => {
+    expect(shallow({ a: 1, b: 2 }, { a: 1, b: 2 })).toBe(true);
+  });
+
+  it('returns false for objects with different top-level values', () => {
+    expect(shallow({ a: 1 }, { a: 2 })).toBe(false);
+    expect(shallow({ a: 1 }, { a: 1, b: 2 })).toBe(false);
+  });
+
+  it('does not deeply compare nested objects', () => {
+    const nested1 = { a: { b: 1 } };
+    const nested2 = { a: { b: 1 } };
+    expect(shallow(nested1, nested2)).toBe(false);
+  });
+
+  it('returns true for same nested object reference', () => {
+    const inner = { b: 1 };
+    expect(shallow({ a: inner }, { a: inner })).toBe(true);
+  });
+
+  it('returns true for equal arrays', () => {
+    expect(shallow([1, 2, 3], [1, 2, 3])).toBe(true);
+  });
+
+  it('returns false for arrays with different values', () => {
+    expect(shallow([1, 2], [1, 3])).toBe(false);
+    expect(shallow([1, 2], [1, 2, 3])).toBe(false);
+  });
+
+  it('returns true for equal Maps', () => {
+    const mapA = new Map([
+      ['a', 1],
+      ['b', 2],
+    ]);
+    const mapB = new Map([
+      ['a', 1],
+      ['b', 2],
+    ]);
+    expect(shallow(mapA, mapB)).toBe(true);
+  });
+
+  it('returns false for Maps with different values', () => {
+    const mapA = new Map([['a', 1]]);
+    const mapB = new Map([['a', 2]]);
+    expect(shallow(mapA, mapB)).toBe(false);
+  });
+
+  it('returns true for equal Sets', () => {
+    const setA = new Set([1, 2, 3]);
+    const setB = new Set([1, 2, 3]);
+    expect(shallow(setA, setB)).toBe(true);
+  });
+
+  it('returns false for Sets with different values', () => {
+    const setA = new Set([1, 2]);
+    const setB = new Set([1, 3]);
+    expect(shallow(setA, setB)).toBe(false);
+  });
+
+  it('returns false for different prototypes', () => {
+    class A {
+      x = 1;
+    }
+    class B {
+      x = 1;
+    }
+    expect(shallow(new A(), new B())).toBe(false);
+  });
+
+  it('returns false when comparing object to null', () => {
+    expect(shallow({ a: 1 }, null)).toBe(false);
+    expect(shallow(null, { a: 1 })).toBe(false);
+  });
+});
diff --git a/packages/brownie/src/__tests__/tsconfig.json b/packages/brownie/src/__tests__/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "extends": "../../../../tsconfig",
+  "compilerOptions": {
+    "verbatimModuleSyntax": false
+  }
+}
diff --git a/packages/brownie/src/index.ts b/packages/brownie/src/index.ts
@@ -1,4 +1,5 @@
-import { useCallback, useSyncExternalStore } from 'react';
+import { useCallback, useDebugValue } from 'react';
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
 import BrownieModule from './NativeBrownieModule';
 
 /**
@@ -95,23 +96,57 @@ export function setState<K extends keyof BrownieStores>(
   }
 }
 
+const identity = <T>(x: T): T => x;
+
+export { shallow } from './shallow';
+
 /**
- * React hook for subscribing to a native store.
+ * React hook for subscribing to a native store with optional selector.
  * @param key Store key registered in StoreManager
  * @returns Tuple of [state, setState] for the store
  */
 export function useBrownieStore<K extends keyof BrownieStores>(
   key: K
-): [BrownieStores[K], (action: SetStateAction<BrownieStores[K]>) => void] {
+): [BrownieStores[K], (action: SetStateAction<BrownieStores[K]>) => void];
+
+/**
+ * React hook for subscribing to a native store with selector.
+ * @param key Store key registered in StoreManager
+ * @param selector Function to select a slice of state
+ * @param equalityFn Optional equality function for comparing selected values
+ * @returns Tuple of [selectedState, setState] for the store
+ */
+export function useBrownieStore<K extends keyof BrownieStores, U>(
+  key: K,
+  selector: (state: BrownieStores[K]) => U,
+  equalityFn?: (a: U, b: U) => boolean
+): [U, (action: SetStateAction<BrownieStores[K]>) => void];
+
+export function useBrownieStore<K extends keyof BrownieStores, U>(
+  key: K,
+  selector?: (state: BrownieStores[K]) => U,
+  equalityFn?: (a: U, b: U) => boolean
+): [U | BrownieStores[K], (action: SetStateAction<BrownieStores[K]>) => void] {
   const sub = useCallback(
     (listener: () => void) => subscribe(key, listener),
     [key]
   );
   const snap = useCallback(() => getSnapshot(key), [key]);
-  const state = useSyncExternalStore(sub, snap, snap);
+
+  const slice = useSyncExternalStoreWithSelector(
+    sub,
+    snap,
+    snap,
+    selector ?? (identity as (state: BrownieStores[K]) => U),
+    equalityFn
+  );
+
+  useDebugValue(slice);
+
   const boundSetState = useCallback(
     (action: SetStateAction<BrownieStores[K]>) => setState(key, action),
     [key]
   );
-  return [state, boundSetState];
+
+  return [slice, boundSetState];
 }
diff --git a/packages/brownie/src/shallow.ts b/packages/brownie/src/shallow.ts
@@ -0,0 +1,73 @@
+const isIterable = (obj: object): obj is Iterable<unknown> =>
+  Symbol.iterator in obj;
+
+const hasIterableEntries = (
+  value: Iterable<unknown>
+): value is Iterable<unknown> & { entries(): Iterable<[unknown, unknown]> } =>
+  'entries' in value;
+
+const compareEntries = (
+  valueA: { entries(): Iterable<[unknown, unknown]> },
+  valueB: { entries(): Iterable<[unknown, unknown]> }
+) => {
+  const mapA = valueA instanceof Map ? valueA : new Map(valueA.entries());
+  const mapB = valueB instanceof Map ? valueB : new Map(valueB.entries());
+  if (mapA.size !== mapB.size) {
+    return false;
+  }
+  for (const [key, value] of mapA) {
+    if (!mapB.has(key) || !Object.is(value, mapB.get(key))) {
+      return false;
+    }
+  }
+  return true;
+};
+
+const compareIterables = (
+  valueA: Iterable<unknown>,
+  valueB: Iterable<unknown>
+) => {
+  const iteratorA = valueA[Symbol.iterator]();
+  const iteratorB = valueB[Symbol.iterator]();
+  let nextA = iteratorA.next();
+  let nextB = iteratorB.next();
+  while (!nextA.done && !nextB.done) {
+    if (!Object.is(nextA.value, nextB.value)) {
+      return false;
+    }
+    nextA = iteratorA.next();
+    nextB = iteratorB.next();
+  }
+  return !!nextA.done && !!nextB.done;
+};
+
+/**
+ * Shallow equality comparison for use with useBrownieStore selector.
+ * Compares objects by their top-level properties.
+ */
+export function shallow<T>(valueA: T, valueB: T): boolean {
+  if (Object.is(valueA, valueB)) {
+    return true;
+  }
+  if (
+    typeof valueA !== 'object' ||
+    valueA === null ||
+    typeof valueB !== 'object' ||
+    valueB === null
+  ) {
+    return false;
+  }
+  if (Object.getPrototypeOf(valueA) !== Object.getPrototypeOf(valueB)) {
+    return false;
+  }
+  if (isIterable(valueA) && isIterable(valueB)) {
+    if (hasIterableEntries(valueA) && hasIterableEntries(valueB)) {
+      return compareEntries(valueA, valueB);
+    }
+    return compareIterables(valueA, valueB);
+  }
+  return compareEntries(
+    { entries: () => Object.entries(valueA) },
+    { entries: () => Object.entries(valueB) }
+  );
+}
diff --git a/yarn.lock b/yarn.lock
@@ -1607,6 +1607,7 @@ __metadata:
     "@types/jest": "npm:^29.5.14"
     "@types/node": "npm:^22.0.0"
     "@types/react": "npm:^19.1.1"
+    "@types/use-sync-external-store": "npm:^0.0.6"
     jest: "npm:^29.7.0"
     quicktype-core: "npm:^23.0.170"
     quicktype-typescript-input: "npm:^23.0.170"
@@ -1616,6 +1617,7 @@ __metadata:
     ts-jest: "npm:^29.2.5"
     ts-morph: "npm:^25.0.0"
     typescript: "npm:5.8.3"
+    use-sync-external-store: "npm:^1.4.0"
   peerDependencies:
     react: "*"
     react-native: "*"
@@ -4465,6 +4467,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/use-sync-external-store@npm:^0.0.6":
+  version: 0.0.6
+  resolution: "@types/use-sync-external-store@npm:0.0.6"
+  checksum: 10/a95ce330668501ad9b1c5b7f2b14872ad201e552a0e567787b8f1588b22c7040c7c3d80f142cbb9f92d13c4ea41c46af57a20f2af4edf27f224d352abcfe4049
+  languageName: node
+  linkType: hard
+
 "@types/yargs-parser@npm:*":
   version: 21.0.3
   resolution: "@types/yargs-parser@npm:21.0.3"
@@ -15299,7 +15308,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"use-sync-external-store@npm:^1.5.0":
+"use-sync-external-store@npm:^1.4.0, use-sync-external-store@npm:^1.5.0":
   version: 1.6.0
   resolution: "use-sync-external-store@npm:1.6.0"
   peerDependencies:

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export default {`
	`2`	`+ nativeStoreDidChange: jest.fn(),`
	`3`	`+};`