docs(suspensive.org): update example code concisely

toss · Oct 9, 2024 · cc0b196 · cc0b196
1 parent b23447f
commit cc0b196
Show file tree

Hide file tree

Showing 14 changed files with 95 additions and 97 deletions.
diff --git a/docs/suspensive.org/src/pages/docs/react-query/SuspenseQueries.en.mdx b/docs/suspensive.org/src/pages/docs/react-query/SuspenseQueries.en.mdx
@@ -30,15 +30,15 @@ const PostsPage = ({ userId }) => (
 <Sandpack>
 
 ```tsx Example.tsx active
-import React from 'react'
+import { useState } from 'react'
 import { SuspenseQueries } from '@suspensive/react-query'
 import { Suspense, ErrorBoundary } from '@suspensive/react'
 import { PostListItem } from './PostListItem'
 import { UserProfile } from './UserProfile'
 import { userQueryOptions, postsQueryOptions } from './queries'
 
 export const Example = () => {
-  const [userId, setUserId] = React.useState(1)
+  const [userId, setUserId] = useState(1)
 
   return (
     <ErrorBoundary fallback={({ error }) => <>{error.message}</>}>

diff --git a/docs/suspensive.org/src/pages/docs/react-query/SuspenseQueries.ko.mdx b/docs/suspensive.org/src/pages/docs/react-query/SuspenseQueries.ko.mdx
@@ -30,15 +30,15 @@ const PostsPage = ({ userId }) => (
 <Sandpack>
 
 ```tsx Example.tsx active
-import React from 'react'
+import { useState } from 'react'
 import { SuspenseQueries } from '@suspensive/react-query'
 import { Suspense, ErrorBoundary } from '@suspensive/react'
 import { PostListItem } from './PostListItem'
 import { UserProfile } from './UserProfile'
 import { userQueryOptions, postsQueryOptions } from './queries'
 
 export const Example = () => {
-  const [userId, setUserId] = React.useState(1)
+  const [userId, setUserId] = useState(1)
 
   return (
     <ErrorBoundary fallback={({ error }) => <>{error.message}</>}>

diff --git a/docs/suspensive.org/src/pages/docs/react-query/SuspenseQuery.en.mdx b/docs/suspensive.org/src/pages/docs/react-query/SuspenseQuery.en.mdx
@@ -30,16 +30,16 @@ const PostsPage = ({ userId }) => (
 <Sandpack>
 
 ```tsx Example.tsx active
-import React from 'react'
+import { useState } from 'react'
 import { ErrorBoundary, Suspense } from '@suspensive/react'
 import { SuspenseQuery } from '@suspensive/react-query'
 import { PostListItem } from './PostListItem'
 import { UserProfile } from './UserProfile'
 import { postsQueryOptions, userQueryOptions } from './queries'
 
 export const Example = () => {
-  const [userId, setUserId] = React.useState(1)
-  const [showAllPosts, setShowAllPosts] = React.useState(false)
+  const [userId, setUserId] = useState(1)
+  const [showAllPosts, setShowAllPosts] = useState(false)
 
   return (
     <ErrorBoundary fallback={({ error }) => <>{error.message}</>}>

diff --git a/docs/suspensive.org/src/pages/docs/react-query/SuspenseQuery.ko.mdx b/docs/suspensive.org/src/pages/docs/react-query/SuspenseQuery.ko.mdx
@@ -30,16 +30,16 @@ const PostsPage = ({ userId }) => (
 <Sandpack>
 
 ```tsx Example.tsx active
-import React from 'react'
+import { useState } from 'react'
 import { ErrorBoundary, Suspense } from '@suspensive/react'
 import { SuspenseQuery } from '@suspensive/react-query'
 import { PostListItem } from './PostListItem'
 import { UserProfile } from './UserProfile'
 import { postsQueryOptions, userQueryOptions } from './queries'
 
 export const Example = () => {
-  const [userId, setUserId] = React.useState(1)
-  const [showAllPosts, setShowAllPosts] = React.useState(false)
+  const [userId, setUserId] = useState(1)
+  const [showAllPosts, setShowAllPosts] = useState(false)
 
   return (
     <ErrorBoundary fallback={({ error }) => <>{error.message}</>}>

diff --git a/docs/suspensive.org/src/pages/docs/react-query/useSuspenseInfiniteQuery.en.mdx b/docs/suspensive.org/src/pages/docs/react-query/useSuspenseInfiniteQuery.en.mdx
@@ -22,50 +22,49 @@ const Example = () => {
 
 ```tsx PostList.tsx active
 import { useSuspenseInfiniteQuery } from '@suspensive/react-query'
-import React from 'react'
+import { useEffect, Fragment } from 'react'
 import { getPosts } from './api'
 
 export const PostList = () => {
   const { data, isFetchingNextPage, isFetched, hasNextPage, fetchNextPage } =
     useSuspenseInfiniteQuery({
       queryKey: ['posts'],
       queryFn: ({ pageParam = 1 }) => getPosts(pageParam),
-      getNextPageParam: (lastPage, allPages) => {
-        return lastPage.skip + lastPage.limit < lastPage.total ? allPages.length + 1 : undefined
-      },
+      getNextPageParam: (lastPage, allPages) =>
+        lastPage.skip + lastPage.limit < lastPage.total ? allPages.length + 1 : undefined
     })
 
-  React.useEffect(() => {
-    if (!isFetchingNextPage && isFetched) {
-      window.scrollTo({
-        top: document.body.scrollHeight,
-        behavior: 'smooth',
-      })
-    }
-  }, [isFetchingNextPage, isFetched])
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', marginBottom: '100px' }}>
-      <ol>
-        {data.pages.map((page, i) => (
-          <React.Fragment key={i}>
-            {page.data.map((post) => (
-              <li key={post.id} style={{ marginBottom: '10px' }}>
-                {post.title}
-              </li>
-            ))}
-          </React.Fragment>
-        ))}
-      </ol>
-      <button onClick={() => fetchNextPage()} disabled={!hasNextPage || isFetchingNextPage}>
-        {isFetchingNextPage
-          ? 'Loading more...'
-          : hasNextPage
-            ? 'Load More'
-            : 'Nothing more to load'}
-      </button>
-    </div>
-  )
+    useEffect(() => {
+      if (!isFetchingNextPage && isFetched) {
+        window.scrollTo({
+          top: document.body.scrollHeight,
+          behavior: 'smooth',
+        })
+      }
+    }, [isFetchingNextPage, isFetched])
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', marginBottom: '100px' }}>
+        <ol>
+          {data.pages.map((page, i) => (
+            <Fragment key={i}>
+              {page.data.map((post) => (
+                <li key={post.id} style={{ marginBottom: '10px' }}>
+                  {post.title}
+                </li>
+              ))}
+            </Fragment>
+          ))}
+        </ol>
+        <button onClick={() => fetchNextPage()} disabled={!hasNextPage || isFetchingNextPage}>
+          {isFetchingNextPage
+            ? 'Loading more...'
+            : hasNextPage
+              ? 'Load More'
+              : 'Nothing more to load'}
+        </button>
+      </div>
+    )
 }
 ```
 

diff --git a/docs/suspensive.org/src/pages/docs/react-query/useSuspenseInfiniteQuery.ko.mdx b/docs/suspensive.org/src/pages/docs/react-query/useSuspenseInfiniteQuery.ko.mdx
@@ -22,50 +22,49 @@ const Example = () => {
 
 ```tsx Posts.tsx active
 import { useSuspenseInfiniteQuery } from '@suspensive/react-query'
-import React from 'react'
+import { useEffect, Fragment } from 'react'
 import { getPosts } from './api'
 
 export const Posts = () => {
   const { data, isFetchingNextPage, isFetched, hasNextPage, fetchNextPage } =
     useSuspenseInfiniteQuery({
       queryKey: ['posts'],
       queryFn: ({ pageParam = 1 }) => getPosts(pageParam),
-      getNextPageParam: (lastPage, allPages) => {
-        return lastPage.skip + lastPage.limit < lastPage.total ? allPages.length + 1 : undefined
-      },
+      getNextPageParam: (lastPage, allPages) =>
+        lastPage.skip + lastPage.limit < lastPage.total ? allPages.length + 1 : undefined
     })
 
-  React.useEffect(() => {
-    if (!isFetchingNextPage && isFetched) {
-      window.scrollTo({
-        top: document.body.scrollHeight,
-        behavior: 'smooth',
-      })
-    }
-  }, [isFetchingNextPage, isFetched])
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', marginBottom: '100px' }}>
-      <ol>
-        {data.pages.map((page, i) => (
-          <React.Fragment key={i}>
-            {page.data.map((post) => (
-              <li key={post.id} style={{ marginBottom: '10px' }}>
-                {post.title}
-              </li>
-            ))}
-          </React.Fragment>
-        ))}
-      </ol>
-      <button onClick={() => fetchNextPage()} disabled={!hasNextPage || isFetchingNextPage}>
-        {isFetchingNextPage
-          ? 'Loading more...'
-          : hasNextPage
-            ? 'Load More'
-            : 'Nothing more to load'}
-      </button>
-    </div>
-  )
+    useEffect(() => {
+      if (!isFetchingNextPage && isFetched) {
+        window.scrollTo({
+          top: document.body.scrollHeight,
+          behavior: 'smooth',
+        })
+      }
+    }, [isFetchingNextPage, isFetched])
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', marginBottom: '100px' }}>
+        <ol>
+          {data.pages.map((page, i) => (
+            <Fragment key={i}>
+              {page.data.map((post) => (
+                <li key={post.id} style={{ marginBottom: '10px' }}>
+                  {post.title}
+                </li>
+              ))}
+            </Fragment>
+          ))}
+        </ol>
+        <button onClick={() => fetchNextPage()} disabled={!hasNextPage || isFetchingNextPage}>
+          {isFetchingNextPage
+            ? 'Loading more...'
+            : hasNextPage
+              ? 'Load More'
+              : 'Nothing more to load'}
+        </button>
+      </div>
+    )
 }
 ```
 

diff --git a/docs/suspensive.org/src/pages/docs/react-query/useSuspenseQueries.en.mdx b/docs/suspensive.org/src/pages/docs/react-query/useSuspenseQueries.en.mdx
@@ -53,11 +53,11 @@ export const Post = ({ postId }: { postId: number }) => {
 
 ```tsx Example.tsx
 import { Suspense } from '@suspensive/react'
-import React from 'react'
+import { useState } from 'react'
 import { Post } from './Post'
 
 export const Example = () => {
-  const [postId, setPostId] = React.useState(1)
+  const [postId, setPostId] = useState(1)
 
   return (
     <div>

diff --git a/docs/suspensive.org/src/pages/docs/react-query/useSuspenseQueries.ko.mdx b/docs/suspensive.org/src/pages/docs/react-query/useSuspenseQueries.ko.mdx
@@ -53,11 +53,11 @@ export const Post = ({ postId }: { postId: number }) => {
 
 ```tsx Example.tsx
 import { Suspense } from '@suspensive/react'
-import React from 'react'
+import { useState } from 'react'
 import { Post } from './Post'
 
 export const Example = () => {
-  const [postId, setPostId] = React.useState(1)
+  const [postId, setPostId] = useState(1)
 
   return (
     <div>

diff --git a/docs/suspensive.org/src/pages/docs/react-query/useSuspenseQuery.en.mdx b/docs/suspensive.org/src/pages/docs/react-query/useSuspenseQuery.en.mdx
@@ -41,11 +41,11 @@ export const Post = ({ postId }: { postId: number }) => {
 
 ```tsx Example.tsx
 import { Suspense } from '@suspensive/react'
-import React from 'react'
+import { useState } from 'react'
 import { Post } from './Post'
 
 export const Example = () => {
-  const [postId, setPostId] = React.useState(1)
+  const [postId, setPostId] = useState(1)
 
   return (
     <div>

diff --git a/docs/suspensive.org/src/pages/docs/react-query/useSuspenseQuery.ko.mdx b/docs/suspensive.org/src/pages/docs/react-query/useSuspenseQuery.ko.mdx
@@ -41,11 +41,11 @@ export const Post = ({ postId }: { postId: number }) => {
 
 ```tsx Example.tsx
 import { Suspense } from '@suspensive/react'
-import React from 'react'
+import { useState } from 'react'
 import { Post } from './Post'
 
 export const Example = () => {
-  const [postId, setPostId] = React.useState(1)
+  const [postId, setPostId] = useState(1)
 
   return (
     <div>

diff --git a/docs/suspensive.org/src/pages/docs/react/wrap.en.mdx b/docs/suspensive.org/src/pages/docs/react/wrap.en.mdx
@@ -52,7 +52,7 @@ const PostItem =
 ```tsx Example.tsx active
 import { wrap, ErrorBoundaryGroup } from '@suspensive/react'
 import { useSuspenseQuery } from '@suspensive/react-query'
-import React, { createElement } from 'react'
+import { useState, createElement } from 'react'
 
 import { getPost, getPosts } from './api'
 
@@ -93,7 +93,7 @@ const PostItem = wrap
       queryKey: ['posts', props.id],
       queryFn: () => getPost(props.id),
     })
-    const [throwError, setThrowError] = React.useState(false)
+    const [throwError, setThrowError] = useState(false)
 
     return (
       <div style={{ border: '1px solid black', padding: 10, margin: 10 }}>

diff --git a/docs/suspensive.org/src/pages/docs/react/wrap.ko.mdx b/docs/suspensive.org/src/pages/docs/react/wrap.ko.mdx
@@ -52,7 +52,7 @@ const PostItem =
 ```tsx Example.tsx active
 import { wrap, ErrorBoundaryGroup } from '@suspensive/react'
 import { useSuspenseQuery } from '@suspensive/react-query'
-import React, { createElement } from 'react'
+import { useState, createElement } from 'react'
 
 import { getPost, getPosts } from './api'
 
@@ -93,7 +93,7 @@ const PostItem = wrap
       queryKey: ['posts', props.id],
       queryFn: () => getPost(props.id),
     })
-    const [throwError, setThrowError] = React.useState(false)
+    const [throwError, setThrowError] = useState(false)
 
     return (
       <div style={{ border: '1px solid black', padding: 10, margin: 10 }}>

diff --git a/packages/react-dom/src/useInView.spec.tsx b/packages/react-dom/src/useInView.spec.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react'
-import React, { useCallback } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { intersectionMockInstance, mockAllIsIntersecting, mockIsIntersecting } from './test-utils'
 import { type InViewOptions, useInView } from './useInView'
 
@@ -17,9 +17,9 @@ const HookComponent = ({ options, unmount }: { options?: InViewOptions; unmount?
 }
 
 const LazyHookComponent = ({ options }: { options?: InViewOptions }) => {
-  const [isLoading, setIsLoading] = React.useState(true)
+  const [isLoading, setIsLoading] = useState(true)
 
-  React.useEffect(() => {
+  useEffect(() => {
     setIsLoading(false)
   }, [])
   const wrapper = useInView(options)

diff --git a/packages/react-query-4/src/QueryClientConsumer.tsx b/packages/react-query-4/src/QueryClientConsumer.tsx
@@ -1,5 +1,5 @@
 import { type QueryClient, useQueryClient } from '@tanstack/react-query'
-import type { ReactNode } from 'react'
+import type { Context, ReactNode } from 'react'
 
 /**
  * @experimental This is experimental feature.
@@ -9,7 +9,7 @@ export function QueryClientConsumer({
   context,
 }: {
   children: (queryClient: QueryClient) => ReactNode
-  context?: React.Context<QueryClient | undefined>
+  context?: Context<QueryClient | undefined>
 }) {
   return <>{children(useQueryClient({ context }))}</>
 }