@buoy-gg/react-query 4.0.2 → 6.0.0

package/lib/commonjs/react-query/components/modals/QueryBrowserModal.js

@@ -199,7 +199,11 @@ function QueryBrowserModal({
     onModeChange: handleModeChange,
     enablePersistence: true,
     initialMode: "bottomSheet",
-    enableGlitchEffects: true,
+    enableGlitchEffects: true
+    // The query list virtualizes itself (see QueryBrowser) — it must own
+    // scrolling. The filter view keeps the wrapper.
+    ,
+    disableScrollWrapper: !showFilterView,
     styles: {},
     footer: !showFilterView ? footerNode : undefined,
     footerHeight: !showFilterView ? 56 : undefined,

package/lib/commonjs/react-query/components/query-browser/QueryBrowser.js

@@ -106,16 +106,51 @@ function QueryBrowser({
       })
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
-    style: styles.listWrapper,
-    contentContainerStyle: contentContainerStyle || styles.listContent,
-    showsVerticalScrollIndicator: true,
-    children: filteredQueries.map(query => /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryRow.default, {
-      query: query,
-      isSelected: selectedQuery?.queryHash === query.queryHash,
-      onSelect: handleQuerySelect
-    }, `${query.queryHash}-${query.state.dataUpdatedAt}-${query.state.fetchStatus}`))
-  });
+  return (
+    /*#__PURE__*/
+    // Virtualized list with STABLE keys (queryHash). The previous
+    // ScrollView + map mounted every row, and its key included
+    // dataUpdatedAt/fetchStatus so rows REMOUNTED on each update — at 300
+    // seeded queries that measured 168% CPU with 546 row renders during a
+    // 5s idle dwell (tool-bench 2026-07-06). TanStack Query objects are
+    // mutable with stable identity, so `stateSig` carries the changing
+    // fields for the row's memo comparison.
+    (0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+      style: styles.listWrapper,
+      contentContainerStyle: contentContainerStyle || styles.listContent,
+      data: filteredQueries,
+      keyExtractor: queryKeyExtractor,
+      renderItem: ({
+        item: query
+      }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryRow.default, {
+        query: query,
+        stateSig: computeQueryStateSig(query),
+        isSelected: selectedQuery?.queryHash === query.queryHash,
+        onSelect: handleQuerySelect
+      }),
+      showsVerticalScrollIndicator: true,
+      removeClippedSubviews: true,
+      initialNumToRender: 12,
+      maxToRenderPerBatch: 8,
+      windowSize: 5,
+      updateCellsBatchingPeriod: 50
+    })
+  );
+}
+const queryKeyExtractor = q => q.queryHash;
+
+/** The row-visible slice of a query's mutable state, as a comparable
+ * string — drives QueryRow's memo (see comment above). */
+function computeQueryStateSig(q) {
+  let observers = 0;
+  let stale = false;
+  try {
+    observers = q.getObserversCount();
+    stale = q.isStale();
+  } catch {
+    // defensive: state reads on a disposed query must not break the list
+  }
+  return `${q.state.dataUpdatedAt}|${q.state.fetchStatus}|${q.state.status}|${observers}|${stale}`;
 }
 const styles = _reactNative.StyleSheet.create({
   listWrapper: {

package/lib/commonjs/react-query/components/query-browser/QueryRow.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _react = require("react");
 var _getQueryStatusLabel = require("../../utils/getQueryStatusLabel");
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -15,11 +16,15 @@ const getQueryText = query => {
 /**
  * Single row representation of a query for the list view, showing status and observer count.
  */
-const QueryRow = ({
+// Memo justified by profiling (tool-bench 2026-07-06): 546 row renders in
+// a 5s idle dwell at 300 queries. `stateSig` exists ONLY for this memo —
+// Query objects are mutable with stable identity, so shallow-comparing
+// `query` alone would never re-render (see QueryBrowser).
+const QueryRow = /*#__PURE__*/(0, _react.memo)(function QueryRow({
   query,
   isSelected,
   onSelect
-}) => {
+}) {
   // Buoy theme status color mapping
   const getStatusHexColor = status => {
     switch (status) {
@@ -76,5 +81,5 @@ const QueryRow = ({
     isSelected: isSelected,
     onPress: () => onSelect(query)
   });
-};
+});
 var _default = exports.default = QueryRow;

package/lib/module/react-query/components/modals/QueryBrowserModal.js

@@ -195,7 +195,11 @@ export function QueryBrowserModal({
     onModeChange: handleModeChange,
     enablePersistence: true,
     initialMode: "bottomSheet",
-    enableGlitchEffects: true,
+    enableGlitchEffects: true
+    // The query list virtualizes itself (see QueryBrowser) — it must own
+    // scrolling. The filter view keeps the wrapper.
+    ,
+    disableScrollWrapper: !showFilterView,
     styles: {},
     footer: !showFilterView ? footerNode : undefined,
     footerHeight: !showFilterView ? 56 : undefined,

package/lib/module/react-query/components/query-browser/QueryBrowser.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import { useMemo, useCallback } from "react";
-import { View, StyleSheet, Text, ScrollView } from "react-native";
+import { View, StyleSheet, Text, FlatList } from "react-native";
 import QueryRow from "./QueryRow";
 import useAllQueries from "../../hooks/useAllQueries";
 import { getQueryStatusLabel } from "../../utils/getQueryStatusLabel";
@@ -101,16 +101,51 @@ export default function QueryBrowser({
       })
     });
   }
-  return /*#__PURE__*/_jsx(ScrollView, {
-    style: styles.listWrapper,
-    contentContainerStyle: contentContainerStyle || styles.listContent,
-    showsVerticalScrollIndicator: true,
-    children: filteredQueries.map(query => /*#__PURE__*/_jsx(QueryRow, {
-      query: query,
-      isSelected: selectedQuery?.queryHash === query.queryHash,
-      onSelect: handleQuerySelect
-    }, `${query.queryHash}-${query.state.dataUpdatedAt}-${query.state.fetchStatus}`))
-  });
+  return (
+    /*#__PURE__*/
+    // Virtualized list with STABLE keys (queryHash). The previous
+    // ScrollView + map mounted every row, and its key included
+    // dataUpdatedAt/fetchStatus so rows REMOUNTED on each update — at 300
+    // seeded queries that measured 168% CPU with 546 row renders during a
+    // 5s idle dwell (tool-bench 2026-07-06). TanStack Query objects are
+    // mutable with stable identity, so `stateSig` carries the changing
+    // fields for the row's memo comparison.
+    _jsx(FlatList, {
+      style: styles.listWrapper,
+      contentContainerStyle: contentContainerStyle || styles.listContent,
+      data: filteredQueries,
+      keyExtractor: queryKeyExtractor,
+      renderItem: ({
+        item: query
+      }) => /*#__PURE__*/_jsx(QueryRow, {
+        query: query,
+        stateSig: computeQueryStateSig(query),
+        isSelected: selectedQuery?.queryHash === query.queryHash,
+        onSelect: handleQuerySelect
+      }),
+      showsVerticalScrollIndicator: true,
+      removeClippedSubviews: true,
+      initialNumToRender: 12,
+      maxToRenderPerBatch: 8,
+      windowSize: 5,
+      updateCellsBatchingPeriod: 50
+    })
+  );
+}
+const queryKeyExtractor = q => q.queryHash;
+
+/** The row-visible slice of a query's mutable state, as a comparable
+ * string — drives QueryRow's memo (see comment above). */
+function computeQueryStateSig(q) {
+  let observers = 0;
+  let stale = false;
+  try {
+    observers = q.getObserversCount();
+    stale = q.isStale();
+  } catch {
+    // defensive: state reads on a disposed query must not break the list
+  }
+  return `${q.state.dataUpdatedAt}|${q.state.fetchStatus}|${q.state.status}|${observers}|${stale}`;
 }
 const styles = StyleSheet.create({
   listWrapper: {

package/lib/module/react-query/components/query-browser/QueryRow.js

@@ -1,5 +1,6 @@
 "use strict";
 
+import { memo } from "react";
 import { getQueryStatusLabel } from "../../utils/getQueryStatusLabel";
 import { CompactRow, buoyColors, useRelativeTime } from "@buoy-gg/shared-ui";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -11,11 +12,15 @@ const getQueryText = query => {
 /**
  * Single row representation of a query for the list view, showing status and observer count.
  */
-const QueryRow = ({
+// Memo justified by profiling (tool-bench 2026-07-06): 546 row renders in
+// a 5s idle dwell at 300 queries. `stateSig` exists ONLY for this memo —
+// Query objects are mutable with stable identity, so shallow-comparing
+// `query` alone would never re-render (see QueryBrowser).
+const QueryRow = /*#__PURE__*/memo(function QueryRow({
   query,
   isSelected,
   onSelect
-}) => {
+}) {
   // Buoy theme status color mapping
   const getStatusHexColor = status => {
     switch (status) {
@@ -72,5 +77,5 @@ const QueryRow = ({
     isSelected: isSelected,
     onPress: () => onSelect(query)
   });
-};
+});
 export default QueryRow;

package/lib/typescript/react-query/components/modals/QueryBrowserModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QueryBrowserModal.d.ts","sourceRoot":"","sources":["../../../../../src/react-query/components/modals/QueryBrowserModal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAkB,MAAM,uBAAuB,CAAC;AAiBxE,UAAU,sBAAsB;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,CAAC,EAAE,QAAQ,CAAC;IAC5B,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,KAAK,IAAI,CAAC;IAClD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACjD,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,WAAW,EAAE,CAAC,GAAG,EAAE,SAAS,GAAG,WAAW,KAAK,IAAI,CAAC;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,gBAAgB,EAChB,aAAa,EACb,OAAO,EACP,UAAU,EACV,YAAY,EAAE,oBAAoB,EAClC,cAAc,EAAE,sBAAsB,EACtC,2BAAmC,EACnC,WAAW,EACX,UAAe,EACf,cAAc,GACf,EAAE,sBAAsB,sCA4NxB"}
+{"version":3,"file":"QueryBrowserModal.d.ts","sourceRoot":"","sources":["../../../../../src/react-query/components/modals/QueryBrowserModal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAkB,MAAM,uBAAuB,CAAC;AAiBxE,UAAU,sBAAsB;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,CAAC,EAAE,QAAQ,CAAC;IAC5B,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,KAAK,IAAI,CAAC;IAClD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACjD,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,WAAW,EAAE,CAAC,GAAG,EAAE,SAAS,GAAG,WAAW,KAAK,IAAI,CAAC;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,gBAAgB,EAChB,aAAa,EACb,OAAO,EACP,UAAU,EACV,YAAY,EAAE,oBAAoB,EAClC,cAAc,EAAE,sBAAsB,EACtC,2BAAmC,EACnC,WAAW,EACX,UAAe,EACf,cAAc,GACf,EAAE,sBAAsB,sCA+NxB"}

package/lib/typescript/react-query/components/query-browser/QueryBrowser.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QueryBrowser.d.ts","sourceRoot":"","sources":["../../../../../src/react-query/components/query-browser/QueryBrowser.tsx"],"names":[],"mappings":"AACA,OAAO,EAAsC,SAAS,EAAE,MAAM,cAAc,CAAC;AAC7E,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAM9C,UAAU,KAAK;IACb,aAAa,EAAE,KAAK,GAAG,SAAS,CAAC;IACjC,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,KAAK,IAAI,CAAC;IAClD,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,qBAAqB,CAAC,EAAE,SAAS,CAAC;IAClC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC9B,gBAAgB,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CAChC;AAED;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,aAAa,EACb,aAAa,EACb,YAAY,EACZ,iBAAiB,EACjB,qBAAqB,EACrB,OAAO,EAAE,eAAe,EACxB,UAAe,EACf,eAA2B,EAC3B,gBAA4B,GAC7B,EAAE,KAAK,+BAiIP"}
+{"version":3,"file":"QueryBrowser.d.ts","sourceRoot":"","sources":["../../../../../src/react-query/components/query-browser/QueryBrowser.tsx"],"names":[],"mappings":"AACA,OAAO,EAAoC,SAAS,EAAE,MAAM,cAAc,CAAC;AAC3E,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAM9C,UAAU,KAAK;IACb,aAAa,EAAE,KAAK,GAAG,SAAS,CAAC;IACjC,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,KAAK,IAAI,CAAC;IAClD,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,qBAAqB,CAAC,EAAE,SAAS,CAAC;IAClC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC9B,gBAAgB,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CAChC;AAED;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,aAAa,EACb,aAAa,EACb,YAAY,EACZ,iBAAiB,EACjB,qBAAqB,EACrB,OAAO,EAAE,eAAe,EACxB,UAAe,EACf,eAA2B,EAC3B,gBAA4B,GAC7B,EAAE,KAAK,+BA8IP"}

package/lib/typescript/react-query/components/query-browser/QueryRow.d.ts

@@ -1,12 +1,14 @@
 import { Query } from "@tanstack/react-query";
 interface QueryRowProps {
     query: Query;
+    /** Changing state slice for the memo comparison — not read directly. */
+    stateSig: string;
     isSelected: boolean;
     onSelect: (query: Query) => void;
 }
 /**
  * Single row representation of a query for the list view, showing status and observer count.
  */
-declare const QueryRow: React.FC<QueryRowProps>;
+declare const QueryRow: import("react").NamedExoticComponent<QueryRowProps>;
 export default QueryRow;
 //# sourceMappingURL=QueryRow.d.ts.map

package/lib/typescript/react-query/components/query-browser/QueryRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QueryRow.d.ts","sourceRoot":"","sources":["../../../../../src/react-query/components/query-browser/QueryRow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAiB9C,UAAU,aAAa;IACrB,KAAK,EAAE,KAAK,CAAC;IACb,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAED;;GAEG;AACH,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA6DrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"QueryRow.d.ts","sourceRoot":"","sources":["../../../../../src/react-query/components/query-browser/QueryRow.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAiB9C,UAAU,aAAa;IACrB,KAAK,EAAE,KAAK,CAAC;IACb,wEAAwE;IACxE,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAED;;GAEG;AAKH,QAAA,MAAM,QAAQ,qDA6DZ,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buoy-gg/react-query",
-  "version": "4.0.2",
+  "version": "6.0.0",
   "description": "react-query package",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -26,8 +26,8 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@buoy-gg/floating-tools-core": "4.0.2",
-    "@buoy-gg/shared-ui": "4.0.2"
+    "@buoy-gg/shared-ui": "6.0.0",
+    "@buoy-gg/floating-tools-core": "6.0.0"
   },
   "peerDependencies": {
     "@tanstack/react-query": ">=5.0.0",