refactor(preact-query*): rename local 'useRef' variables with the 'Ref' suffix

packages/preact-query-persist-client/src/PersistQueryClientProvider.tsx

@@ -29,23 +29,23 @@ export const PersistQueryClientProvider = ({
   ...props
 }: PersistQueryClientProviderProps): VNode => {
   const [isRestoring, setIsRestoring] = useState(true)
-  const refs = useRef({ persistOptions, onSuccess, onError })
-  const didRestore = useRef(false)
+  const optionsRef = useRef({ persistOptions, onSuccess, onError })
+  const didRestoreRef = useRef(false)
 
   useEffect(() => {
-    refs.current = { persistOptions, onSuccess, onError }
+    optionsRef.current = { persistOptions, onSuccess, onError }
   })
 
   useEffect(() => {
     const options = {
-      ...refs.current.persistOptions,
+      ...optionsRef.current.persistOptions,
       queryClient: props.client,
     }
-    if (!didRestore.current) {
-      didRestore.current = true
+    if (!didRestoreRef.current) {
+      didRestoreRef.current = true
       persistQueryClientRestore(options)
-        .then(() => refs.current.onSuccess?.())
-        .catch(() => refs.current.onError?.())
+        .then(() => optionsRef.current.onSuccess?.())
+        .catch(() => optionsRef.current.onError?.())
         .finally(() => {
           setIsRestoring(false)
         })

packages/preact-query/src/__tests__/fine-grained-persister.test.tsx

@@ -56,7 +56,7 @@ describe('fine grained persister', () => {
     )
 
     function Test() {
-      const [_, setRef] = useState<HTMLDivElement | null>()
+      const [_ref, setRef] = useState<HTMLDivElement | null>()
 
       const { data } = useQuery({
         queryKey: key,
@@ -109,7 +109,7 @@ describe('fine grained persister', () => {
     )
 
     function Test() {
-      const [_, setRef] = useState<HTMLDivElement | null>()
+      const [_ref, setRef] = useState<HTMLDivElement | null>()
 
       const { data } = useQuery({
         queryKey: key,
@@ -150,7 +150,7 @@ describe('fine grained persister', () => {
     }
 
     function Test() {
-      const [_, setRef] = useState<HTMLDivElement | null>()
+      const [_ref, setRef] = useState<HTMLDivElement | null>()
 
       const { data } = useQuery({
         queryKey: key,

packages/preact-query/src/__tests__/useInfiniteQuery.test.tsx

@@ -1431,11 +1431,11 @@ describe('useInfiniteQuery', () => {
             <>
               <div>Data:</div>
               {data.pages.map((page, i) => (
-                <div key={i}>
+                <div key={page.ts}>
                   <div>
                     Page {i}: {page.ts}
                   </div>
-                  <div key={i}>
+                  <div>
                     {page.items.map((item) => (
                       <p key={item}>Item: {item}</p>
                     ))}
@@ -1567,11 +1567,11 @@ describe('useInfiniteQuery', () => {
             <>
               <div>Data:</div>
               {data.pages.map((page, i) => (
-                <div key={i}>
+                <div key={page.ts}>
                   <div>
                     Page {i}: {page.ts}
                   </div>
-                  <div key={i}>
+                  <div>
                     {page.items.map((item) => (
                       <p key={item}>Item: {item}</p>
                     ))}

packages/preact-query/src/__tests__/usePrefetchInfiniteQuery.test.tsx

@@ -55,8 +55,8 @@ describe('usePrefetchInfiniteQuery', () => {
 
       return (
         <div>
-          {state.data.pages.map((page, index) => (
-            <div key={index}>data: {page}</div>
+          {state.data.pages.map((page) => (
+            <div key={page}>data: {page}</div>
           ))}
           <button onClick={() => state.fetchNextPage()}>Next Page</button>
         </div>
@@ -119,8 +119,8 @@ describe('usePrefetchInfiniteQuery', () => {
 
       return (
         <div>
-          {state.data.pages.map((page, index) => (
-            <div key={index}>data: {page}</div>
+          {state.data.pages.map((page) => (
+            <div key={page}>data: {page}</div>
           ))}
           <button onClick={() => state.fetchNextPage()}>Next Page</button>
         </div>
@@ -177,8 +177,8 @@ describe('usePrefetchInfiniteQuery', () => {
 
       return (
         <div>
-          {state.data.pages.map((page, index) => (
-            <div key={index}>data: {page}</div>
+          {state.data.pages.map((page) => (
+            <div key={page}>data: {page}</div>
           ))}
           <button onClick={() => state.fetchNextPage()}>Next Page</button>
         </div>

packages/preact-query/src/__tests__/useQuery.test.tsx

@@ -514,7 +514,7 @@ describe('useQuery', () => {
     const states: Array<UseQueryResult<string>> = []
 
     function Page() {
-      const [, rerender] = useState({})
+      const [_state, setState] = useState({})
 
       const state = useQuery({
         queryKey: key,
@@ -533,7 +533,7 @@ describe('useQuery', () => {
           <button
             onClick={() => {
               queryClient.removeQueries({ queryKey: key })
-              rerender({})
+              setState({})
             }}
           >
             remove
@@ -817,7 +817,7 @@ describe('useQuery', () => {
     let count = 0
 
     function Page() {
-      const [, rerender] = useState({})
+      const [_state, setState] = useState({})
       const state = useQuery({
         queryKey: key,
         queryFn: () => ++count,
@@ -831,7 +831,7 @@ describe('useQuery', () => {
           <button onClick={() => queryClient.removeQueries({ queryKey: key })}>
             remove
           </button>
-          <button onClick={() => rerender({})}>rerender</button>
+          <button onClick={() => setState({})}>rerender</button>
           data: {state.data ?? 'null'}
         </div>
       )
@@ -2338,7 +2338,7 @@ describe('useQuery', () => {
     const key = queryKey()
 
     function Page() {
-      const [, setNewState] = useState('state')
+      const [_newState, setNewState] = useState('state')
       const state = useQuery({ queryKey: key, queryFn: () => 'data' })
       useEffect(() => {
         setActTimeout(() => {
@@ -3660,7 +3660,7 @@ describe('useQuery', () => {
 
     function Page() {
       const [enabled, setEnabled] = useState(false)
-      const [isPrefetched, setPrefetched] = useState(false)
+      const [isPrefetched, setIsPrefetched] = useState(false)
 
       const query = useQuery({
         queryKey: key,
@@ -3681,7 +3681,7 @@ describe('useQuery', () => {
               queryFn: () => Promise.resolve('prefetched data'),
             })
             .catch(noop)
-          act(() => setPrefetched(true))
+          act(() => setIsPrefetched(true))
         }
 
         prefetch()
@@ -6129,11 +6129,11 @@ describe('useQuery', () => {
         queryFn: () => sleep(10).then(() => 5),
       })
 
-      const mounted = useRef<boolean>(null)
+      const mountedRef = useRef<boolean>(null)
       // this simulates a synchronous update between the time the query is created
       // and the time it is subscribed to that could be missed otherwise
-      if (mounted.current === null) {
-        mounted.current = true
+      if (mountedRef.current === null) {
+        mountedRef.current = true
         queryClient.setQueryData(key, 1)
       }
 
@@ -6290,7 +6290,7 @@ describe('useQuery', () => {
     const key = queryKey()
 
     function Test() {
-      const [_, setRef] = useState<HTMLDivElement | null>()
+      const [_ref, setRef] = useState<HTMLDivElement | null>()
 
       const { data } = useQuery({
         queryKey: [key],

packages/preact-query/src/useMutationState.ts

@@ -164,9 +164,9 @@ export function useMutationState<
 ): Array<TResult> {
   const mutationCache = useQueryClient(queryClient).getMutationCache()
   const optionsRef = useRef(options)
-  const result = useRef<Array<TResult>>(null)
-  if (result.current === null) {
-    result.current = getResult(mutationCache, options)
+  const resultRef = useRef<Array<TResult>>(null)
+  if (resultRef.current === null) {
+    resultRef.current = getResult(mutationCache, options)
   }
 
   useEffect(() => {
@@ -178,16 +178,16 @@ export function useMutationState<
       (onStoreChange) =>
         mutationCache.subscribe(() => {
           const nextResult = replaceEqualDeep(
-            result.current,
+            resultRef.current,
             getResult(mutationCache, optionsRef.current),
           )
-          if (result.current !== nextResult) {
-            result.current = nextResult
+          if (resultRef.current !== nextResult) {
+            resultRef.current = nextResult
             notifyManager.schedule(onStoreChange)
           }
         }),
       [mutationCache],
     ),
-    () => result.current,
+    () => resultRef.current,
   )!
 }