@tanstack/react-query-devtools 4.13.4 → 4.13.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-query-devtools",
-  "version": "4.13.4",
+  "version": "4.13.6",
   "description": "Developer tools to interact with and visualize the TanStack/react-query cache",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -46,7 +46,7 @@
     "react-dom": "^18.2.0",
     "react-dom-17": "npm:react-dom@^17.0.2",
     "react-error-boundary": "^3.1.4",
-    "@tanstack/react-query": "4.13.4"
+    "@tanstack/react-query": "4.13.5"
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "^8.1.1",
@@ -56,7 +56,7 @@
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "@tanstack/react-query": "4.13.4"
+    "@tanstack/react-query": "4.13.5"
   },
   "scripts": {
     "clean": "rm -rf ./build",

package/src/devtools.tsx

@@ -1081,103 +1081,105 @@ interface QueryRowProps {
   queryCache: QueryCache
 }
 
-const QueryRow = ({
-  queryKey,
-  setActiveQueryHash,
-  activeQueryHash,
-  queryCache,
-}: QueryRowProps) => {
-  const queryHash =
-    useSubscribeToQueryCache(
-      queryCache,
-      () => queryCache.find(queryKey)?.queryHash,
-    ) ?? ''
-
-  const queryState = useSubscribeToQueryCache(
+const QueryRow = React.memo(
+  ({
+    queryKey,
+    setActiveQueryHash,
+    activeQueryHash,
     queryCache,
-    () => queryCache.find(queryKey)?.state,
-  )
-
-  const isStale =
-    useSubscribeToQueryCache(queryCache, () =>
-      queryCache.find(queryKey)?.isStale(),
-    ) ?? false
-
-  const isDisabled =
-    useSubscribeToQueryCache(queryCache, () =>
-      queryCache.find(queryKey)?.isDisabled(),
-    ) ?? false
-
-  const observerCount =
-    useSubscribeToQueryCache(queryCache, () =>
-      queryCache.find(queryKey)?.getObserversCount(),
-    ) ?? 0
-
-  if (!queryState) {
-    return null
-  }
+  }: QueryRowProps) => {
+    const queryHash =
+      useSubscribeToQueryCache(
+        queryCache,
+        () => queryCache.find(queryKey)?.queryHash,
+      ) ?? ''
+
+    const queryState = useSubscribeToQueryCache(
+      queryCache,
+      () => queryCache.find(queryKey)?.state,
+    )
+
+    const isStale =
+      useSubscribeToQueryCache(queryCache, () =>
+        queryCache.find(queryKey)?.isStale(),
+      ) ?? false
+
+    const isDisabled =
+      useSubscribeToQueryCache(queryCache, () =>
+        queryCache.find(queryKey)?.isDisabled(),
+      ) ?? false
+
+    const observerCount =
+      useSubscribeToQueryCache(queryCache, () =>
+        queryCache.find(queryKey)?.getObserversCount(),
+      ) ?? 0
+
+    if (!queryState) {
+      return null
+    }
 
-  return (
-    <div
-      role="button"
-      aria-label={`Open query details for ${queryHash}`}
-      onClick={() =>
-        setActiveQueryHash(activeQueryHash === queryHash ? '' : queryHash)
-      }
-      style={{
-        display: 'flex',
-        borderBottom: `solid 1px ${theme.grayAlt}`,
-        cursor: 'pointer',
-        background:
-          queryHash === activeQueryHash ? 'rgba(255,255,255,.1)' : undefined,
-      }}
-    >
+    return (
       <div
+        role="button"
+        aria-label={`Open query details for ${queryHash}`}
+        onClick={() =>
+          setActiveQueryHash(activeQueryHash === queryHash ? '' : queryHash)
+        }
         style={{
-          flex: '0 0 auto',
-          width: '2em',
-          height: '2em',
-          background: getQueryStatusColor({
-            queryState,
-            isStale,
-            observerCount,
-            theme,
-          }),
           display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          fontWeight: 'bold',
-          textShadow: isStale ? '0' : '0 0 10px black',
-          color: isStale ? 'black' : 'white',
+          borderBottom: `solid 1px ${theme.grayAlt}`,
+          cursor: 'pointer',
+          background:
+            queryHash === activeQueryHash ? 'rgba(255,255,255,.1)' : undefined,
         }}
       >
-        {observerCount}
-      </div>
-      {isDisabled ? (
         <div
           style={{
             flex: '0 0 auto',
+            width: '2em',
             height: '2em',
-            background: theme.gray,
+            background: getQueryStatusColor({
+              queryState,
+              isStale,
+              observerCount,
+              theme,
+            }),
             display: 'flex',
             alignItems: 'center',
+            justifyContent: 'center',
             fontWeight: 'bold',
-            padding: '0 0.5em',
+            textShadow: isStale ? '0' : '0 0 10px black',
+            color: isStale ? 'black' : 'white',
           }}
         >
-          disabled
+          {observerCount}
         </div>
-      ) : null}
-      <Code
-        style={{
-          padding: '.5em',
-        }}
-      >
-        {`${queryHash}`}
-      </Code>
-    </div>
-  )
-}
+        {isDisabled ? (
+          <div
+            style={{
+              flex: '0 0 auto',
+              height: '2em',
+              background: theme.gray,
+              display: 'flex',
+              alignItems: 'center',
+              fontWeight: 'bold',
+              padding: '0 0.5em',
+            }}
+          >
+            disabled
+          </div>
+        ) : null}
+        <Code
+          style={{
+            padding: '.5em',
+          }}
+        >
+          {`${queryHash}`}
+        </Code>
+      </div>
+    )
+  },
+)
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 function noop() {}