From 115f663a5273f0cbd7749bab268b762397a04b98 Mon Sep 17 00:00:00 2001
From: Dhiraj Arun <dhrjarun@gmail.com>
Date: Sun, 11 Sep 2022 19:38:46 +0530
Subject: [PATCH 1/2] fix(devtools): not subscribing to queryCache if devtool
 is closed

This will stop unnecessary rerender of devtools when they are closed.
---
 .../react-query-devtools/src/devtools.tsx     | 330 +++++++++---------
 1 file changed, 170 insertions(+), 160 deletions(-)

diff --git a/packages/react-query-devtools/src/devtools.tsx b/packages/react-query-devtools/src/devtools.tsx
index e0ee47ff74..fe27dc9a7a 100644
--- a/packages/react-query-devtools/src/devtools.tsx
+++ b/packages/react-query-devtools/src/devtools.tsx
@@ -377,12 +377,18 @@ export function ReactQueryDevtools({
 const useSubscribeToQueryCache = <T,>(
   queryCache: QueryCache,
   getSnapshot: () => T,
+  skip: boolean = false,
 ): T => {
   return useSyncExternalStore(
     React.useCallback(
-      (onStoreChange) =>
-        queryCache.subscribe(notifyManager.batchCalls(onStoreChange)),
-      [queryCache],
+      (onStoreChange) => {
+        if (!skip)
+          return queryCache.subscribe(notifyManager.batchCalls(onStoreChange))
+        return () => {
+          return
+        }
+      },
+      [queryCache, skip],
     ),
     getSnapshot,
     getSnapshot,
@@ -422,6 +428,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
   const queriesCount = useSubscribeToQueryCache(
     queryCache,
     () => queryCache.getAll().length,
+    !isOpen,
   )
 
   const [activeQueryHash, setActiveQueryHash] = useLocalStorage(
@@ -501,188 +508,191 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
           }}
           onMouseDown={handleDragStart}
         ></div>
-        <div
-          style={{
-            flex: '1 1 500px',
-            minHeight: '40%',
-            maxHeight: '100%',
-            overflow: 'auto',
-            borderRight: `1px solid ${theme.grayAlt}`,
-            display: isOpen ? 'flex' : 'none',
-            flexDirection: 'column',
-          }}
-        >
+
+        {isOpen && (
           <div
             style={{
-              padding: '.5em',
-              background: theme.backgroundAlt,
-              display: 'flex',
-              justifyContent: 'space-between',
-              alignItems: 'center',
+              flex: '1 1 500px',
+              minHeight: '40%',
+              maxHeight: '100%',
+              overflow: 'auto',
+              borderRight: `1px solid ${theme.grayAlt}`,
+              display: isOpen ? 'flex' : 'none',
+              flexDirection: 'column',
             }}
           >
-            <button
-              type="button"
-              aria-label="Close React Query Devtools"
-              aria-controls="ReactQueryDevtoolsPanel"
-              aria-haspopup="true"
-              aria-expanded="true"
-              onClick={() => setIsOpen(false)}
-              style={{
-                display: 'inline-flex',
-                background: 'none',
-                border: 0,
-                padding: 0,
-                marginRight: '.5em',
-                cursor: 'pointer',
-              }}
-            >
-              <Logo aria-hidden />
-              <ScreenReader text="Close React Query Devtools" />
-            </button>
             <div
               style={{
+                padding: '.5em',
+                background: theme.backgroundAlt,
                 display: 'flex',
-                flexDirection: 'column',
+                justifyContent: 'space-between',
+                alignItems: 'center',
               }}
             >
-              <QueryStatusCount queryCache={queryCache} />
+              <button
+                type="button"
+                aria-label="Close React Query Devtools"
+                aria-controls="ReactQueryDevtoolsPanel"
+                aria-haspopup="true"
+                aria-expanded="true"
+                onClick={() => setIsOpen(false)}
+                style={{
+                  display: 'inline-flex',
+                  background: 'none',
+                  border: 0,
+                  padding: 0,
+                  marginRight: '.5em',
+                  cursor: 'pointer',
+                }}
+              >
+                <Logo aria-hidden />
+                <ScreenReader text="Close React Query Devtools" />
+              </button>
               <div
                 style={{
                   display: 'flex',
-                  alignItems: 'center',
+                  flexDirection: 'column',
                 }}
               >
-                <Input
-                  placeholder="Filter"
-                  aria-label="Filter by queryhash"
-                  value={filter ?? ''}
-                  onChange={(e) => setFilter(e.target.value)}
-                  onKeyDown={(e) => {
-                    if (e.key === 'Escape') setFilter('')
-                  }}
+                <QueryStatusCount queryCache={queryCache} />
+                <div
                   style={{
-                    flex: '1',
-                    marginRight: '.5em',
-                    width: '100%',
+                    display: 'flex',
+                    alignItems: 'center',
                   }}
-                />
-                {!filter ? (
-                  <>
-                    <Select
-                      aria-label="Sort queries"
-                      value={sort}
-                      onChange={(e) => setSort(e.target.value)}
-                      style={{
-                        flex: '1',
-                        minWidth: 75,
-                        marginRight: '.5em',
-                      }}
-                    >
-                      {Object.keys(sortFns).map((key) => (
-                        <option key={key} value={key}>
-                          Sort by {key}
-                        </option>
-                      ))}
-                    </Select>
-                    <Button
-                      type="button"
-                      onClick={() => setSortDesc((old) => !old)}
-                      style={{
-                        padding: '.3em .4em',
-                        marginRight: '.5em',
-                      }}
-                    >
-                      {sortDesc ? '⬇ Desc' : '⬆ Asc'}
-                    </Button>
-                    <Button
-                      type="button"
-                      onClick={() => {
-                        if (isMockOffline) {
-                          onlineManager.setOnline(undefined)
-                          setMockOffline(false)
-                          window.dispatchEvent(new Event('online'))
-                        } else {
-                          onlineManager.setOnline(false)
-                          setMockOffline(true)
-                        }
-                      }}
-                      aria-label={
-                        isMockOffline
-                          ? 'Restore offline mock'
-                          : 'Mock offline behavior'
-                      }
-                      title={
-                        isMockOffline
-                          ? 'Restore offline mock'
-                          : 'Mock offline behavior'
-                      }
-                      style={{
-                        padding: '0',
-                        height: '2em',
-                      }}
-                    >
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="2em"
-                        height="2em"
-                        viewBox="0 0 24 24"
-                        stroke={isMockOffline ? theme.danger : 'currentColor'}
-                        fill="none"
+                >
+                  <Input
+                    placeholder="Filter"
+                    aria-label="Filter by queryhash"
+                    value={filter ?? ''}
+                    onChange={(e) => setFilter(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Escape') setFilter('')
+                    }}
+                    style={{
+                      flex: '1',
+                      marginRight: '.5em',
+                      width: '100%',
+                    }}
+                  />
+                  {!filter ? (
+                    <>
+                      <Select
+                        aria-label="Sort queries"
+                        value={sort}
+                        onChange={(e) => setSort(e.target.value)}
+                        style={{
+                          flex: '1',
+                          minWidth: 75,
+                          marginRight: '.5em',
+                        }}
                       >
-                        {isMockOffline ? (
-                          <>
-                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                            <line x1="12" y1="18" x2="12.01" y2="18" />
-                            <path d="M9.172 15.172a4 4 0 0 1 5.656 0" />
-                            <path d="M6.343 12.343a7.963 7.963 0 0 1 3.864 -2.14m4.163 .155a7.965 7.965 0 0 1 3.287 2" />
-                            <path d="M3.515 9.515a12 12 0 0 1 3.544 -2.455m3.101 -.92a12 12 0 0 1 10.325 3.374" />
-                            <line x1="3" y1="3" x2="21" y2="21" />
-                          </>
-                        ) : (
-                          <>
-                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                            <line x1="12" y1="18" x2="12.01" y2="18" />
-                            <path d="M9.172 15.172a4 4 0 0 1 5.656 0" />
-                            <path d="M6.343 12.343a8 8 0 0 1 11.314 0" />
-                            <path d="M3.515 9.515c4.686 -4.687 12.284 -4.687 17 0" />
-                          </>
-                        )}
-                      </svg>
-                      <ScreenReader
-                        text={
+                        {Object.keys(sortFns).map((key) => (
+                          <option key={key} value={key}>
+                            Sort by {key}
+                          </option>
+                        ))}
+                      </Select>
+                      <Button
+                        type="button"
+                        onClick={() => setSortDesc((old) => !old)}
+                        style={{
+                          padding: '.3em .4em',
+                          marginRight: '.5em',
+                        }}
+                      >
+                        {sortDesc ? '⬇ Desc' : '⬆ Asc'}
+                      </Button>
+                      <Button
+                        type="button"
+                        onClick={() => {
+                          if (isMockOffline) {
+                            onlineManager.setOnline(undefined)
+                            setMockOffline(false)
+                            window.dispatchEvent(new Event('online'))
+                          } else {
+                            onlineManager.setOnline(false)
+                            setMockOffline(true)
+                          }
+                        }}
+                        aria-label={
                           isMockOffline
                             ? 'Restore offline mock'
                             : 'Mock offline behavior'
                         }
-                      />
-                    </Button>
-                  </>
-                ) : null}
+                        title={
+                          isMockOffline
+                            ? 'Restore offline mock'
+                            : 'Mock offline behavior'
+                        }
+                        style={{
+                          padding: '0',
+                          height: '2em',
+                        }}
+                      >
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          width="2em"
+                          height="2em"
+                          viewBox="0 0 24 24"
+                          stroke={isMockOffline ? theme.danger : 'currentColor'}
+                          fill="none"
+                        >
+                          {isMockOffline ? (
+                            <>
+                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                              <line x1="12" y1="18" x2="12.01" y2="18" />
+                              <path d="M9.172 15.172a4 4 0 0 1 5.656 0" />
+                              <path d="M6.343 12.343a7.963 7.963 0 0 1 3.864 -2.14m4.163 .155a7.965 7.965 0 0 1 3.287 2" />
+                              <path d="M3.515 9.515a12 12 0 0 1 3.544 -2.455m3.101 -.92a12 12 0 0 1 10.325 3.374" />
+                              <line x1="3" y1="3" x2="21" y2="21" />
+                            </>
+                          ) : (
+                            <>
+                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                              <line x1="12" y1="18" x2="12.01" y2="18" />
+                              <path d="M9.172 15.172a4 4 0 0 1 5.656 0" />
+                              <path d="M6.343 12.343a8 8 0 0 1 11.314 0" />
+                              <path d="M3.515 9.515c4.686 -4.687 12.284 -4.687 17 0" />
+                            </>
+                          )}
+                        </svg>
+                        <ScreenReader
+                          text={
+                            isMockOffline
+                              ? 'Restore offline mock'
+                              : 'Mock offline behavior'
+                          }
+                        />
+                      </Button>
+                    </>
+                  ) : null}
+                </div>
               </div>
             </div>
+            <div
+              style={{
+                overflowY: 'auto',
+                flex: '1',
+              }}
+            >
+              {queries.map((query) => {
+                return (
+                  <QueryRow
+                    queryKey={query.queryKey}
+                    activeQueryHash={activeQueryHash}
+                    setActiveQueryHash={setActiveQueryHash}
+                    key={query.queryHash}
+                    queryCache={queryCache}
+                  />
+                )
+              })}
+            </div>
           </div>
-          <div
-            style={{
-              overflowY: 'auto',
-              flex: '1',
-            }}
-          >
-            {queries.map((query) => {
-              return (
-                <QueryRow
-                  queryKey={query.queryKey}
-                  activeQueryHash={activeQueryHash}
-                  setActiveQueryHash={setActiveQueryHash}
-                  key={query.queryHash}
-                  queryCache={queryCache}
-                />
-              )
-            })}
-          </div>
-        </div>
+        )}
 
-        {activeQueryHash ? (
+        {activeQueryHash && isOpen ? (
           <ActiveQuery
             activeQueryHash={activeQueryHash}
             queryCache={queryCache}

From f6894d3ccfec0c03512084e7a0f7994ec8cc2da6 Mon Sep 17 00:00:00 2001
From: Dhiraj Arun <dhrjarun@gmail.com>
Date: Sun, 11 Sep 2022 20:35:32 +0530
Subject: [PATCH 2/2] style(devtools): fix linting issue in devtools.tsx file

---
 packages/react-query-devtools/src/devtools.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/react-query-devtools/src/devtools.tsx b/packages/react-query-devtools/src/devtools.tsx
index fe27dc9a7a..31a467eca5 100644
--- a/packages/react-query-devtools/src/devtools.tsx
+++ b/packages/react-query-devtools/src/devtools.tsx
@@ -517,7 +517,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
               maxHeight: '100%',
               overflow: 'auto',
               borderRight: `1px solid ${theme.grayAlt}`,
-              display: isOpen ? 'flex' : 'none',
+              display: 'flex',
               flexDirection: 'column',
             }}
           >
@@ -641,7 +641,11 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
                         >
                           {isMockOffline ? (
                             <>
-                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                              <path
+                                stroke="none"
+                                d="M0 0h24v24H0z"
+                                fill="none"
+                              />
                               <line x1="12" y1="18" x2="12.01" y2="18" />
                               <path d="M9.172 15.172a4 4 0 0 1 5.656 0" />
                               <path d="M6.343 12.343a7.963 7.963 0 0 1 3.864 -2.14m4.163 .155a7.965 7.965 0 0 1 3.287 2" />
@@ -650,7 +654,11 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
                             </>
                           ) : (
                             <>
-                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                              <path
+                                stroke="none"
+                                d="M0 0h24v24H0z"
+                                fill="none"
+                              />
                               <line x1="12" y1="18" x2="12.01" y2="18" />
                               <path d="M9.172 15.172a4 4 0 0 1 5.656 0" />
                               <path d="M6.343 12.343a8 8 0 0 1 11.314 0" />