chore(React Import): Unification of React import method (#6553)

* refactor: remove console.log

* refactor: remove console.log

* refactor: ts file unification of React import method

* refactor: match convention

* refactor: match convention

* fix: Code style issues found in 1 file. Run Prettier to fix.

---------

Co-authored-by: Dominik Dorfmeister <[email protected]>

Author: Lennon57

examples/react/algolia/src/Search.tsx

@@ -1,9 +1,9 @@
-import { useState } from 'react'
+import * as React from 'react'
 
 import SearchResults from './SearchResults'
 
 export default function Search() {
-  const [query, setQuery] = useState('')
+  const [query, setQuery] = React.useState('')
 
   const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     event.preventDefault()

examples/react/nextjs-suspense-streaming/src/app/page.tsx

@@ -21,7 +21,6 @@ function useWaitQuery(props: { wait: number }) {
       const path = `/api/wait?wait=${props.wait}`
       const url = baseUrl + path
 
-      console.log('fetching', url)
       const res: string = await (
         await fetch(url, {
           cache: 'no-store',

examples/react/nextjs-suspense-streaming/src/app/providers.tsx

@@ -3,7 +3,7 @@
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
-import React from 'react'
+import * as React from 'react'
 import { ReactQueryStreamedHydration } from '@tanstack/react-query-next-experimental'
 
 export function Providers(props: { children: React.ReactNode }) {

packages/react-query-devtools/src/devtools.tsx

@@ -1,8 +1,7 @@
 'use client'
-import { useEffect, useRef, useState } from 'react'
+import * as React from 'react'
 import { onlineManager, useQueryClient } from '@tanstack/react-query'
 import { TanstackQueryDevtools } from '@tanstack/query-devtools'
-import React from 'react'
 import type {
   DevToolsErrorType,
   DevtoolsButtonPosition,
@@ -46,10 +45,10 @@ export function ReactQueryDevtools(
 ): React.ReactElement | null {
   const queryClient = useQueryClient()
   const client = props.client || queryClient
-  const ref = useRef<HTMLDivElement>(null)
+  const ref = React.useRef<HTMLDivElement>(null)
   const { buttonPosition, position, initialIsOpen, errorTypes, styleNonce } =
     props
-  const [devtools] = useState(
+  const [devtools] = React.useState(
     new TanstackQueryDevtools({
       client: client,
       queryFlavor: 'React Query',
@@ -63,31 +62,31 @@ export function ReactQueryDevtools(
     }),
   )
 
-  useEffect(() => {
+  React.useEffect(() => {
     devtools.setClient(client)
   }, [client, devtools])
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (buttonPosition) {
       devtools.setButtonPosition(buttonPosition)
     }
   }, [buttonPosition, devtools])
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (position) {
       devtools.setPosition(position)
     }
   }, [position, devtools])
 
-  useEffect(() => {
+  React.useEffect(() => {
     devtools.setInitialIsOpen(initialIsOpen || false)
   }, [initialIsOpen, devtools])
 
-  useEffect(() => {
+  React.useEffect(() => {
     devtools.setErrorTypes(errorTypes || [])
   }, [errorTypes, devtools])
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (ref.current) {
       devtools.mount(ref.current)
     }

packages/react-query/src/__tests__/useSuspenseQueries.test.tsx

@@ -8,7 +8,7 @@ import {
   vi,
 } from 'vitest'
 import { act, render } from '@testing-library/react'
-import React from 'react'
+import * as React from 'react'
 import { useSuspenseQueries } from '..'
 import { createQueryClient, sleep } from './utils'
 import type { UseSuspenseQueryOptions } from '..'

packages/solid-query-persist-client/src/__tests__/PersistQueryClientProvider.test.tsx

@@ -325,14 +325,12 @@ describe('PersistQueryClientProvider', () => {
         staleTime: Infinity,
       }))
 
-      createEffect(
-        () =>
-          states.push({
-            status: state.status,
-            fetchStatus: state.fetchStatus,
-            data: state.data,
-          }),
-        console.log(state.data),
+      createEffect(() =>
+        states.push({
+          status: state.status,
+          fetchStatus: state.fetchStatus,
+          data: state.data,
+        }),
       )
 
       return (