Suspense

Suspenseとは、React 18から追加された機能で、Suspenseを使用することで、その配下のツリーにレンダーする準備ができていないコンポーネントがあるときに表示するローディングインジケータを指定できる

例

使用前

import { useQuery } from 'react-query'

export const Content: React.FC = () => {
  const { isLoading, message } = useQuery('message', loadMessage)

  if (isLoading) {
    // ローディング中
    return <p>Loading...</p>
  }
  return <Message message={message} />
}

export const App: React.FC = () => {
  return <Content/>
}

使用後

import { Suspense } from 'react'
import { useQuery } from 'react-query'

export const Content: React.FC = () => {
  const { message } = useQuery('message', loadMessage)
  return <Message message={message} />
}

export const App: React.FC = () => {
  return (
    <Suspense fallback={<p>Loading...</p>}>
      <Content />
    </Suspense>
  )
}