Suspense & Error Boundaries in React

import { useSuspenseQuery } from '@tanstack/react-query'
import { Suspense } from 'react'
import { ErrorBoundary } from 'react-error-boundary'

// Using suspense query
function Profile({ userId }) {
  // This will suspend
  const { data } = useSuspenseQuery({
    queryKey: ['profile', userId],
    queryFn: () => fetchProfile(userId)
  })

  // Data is guaranteed to be defined
  return <div>{data.name}</div>
}

// App with Suspense and Error Boundary
function App() {
  return (
    <ErrorBoundary fallback={<div>Something went wrong</div>}>
      <Suspense fallback={<div>Loading...</div>}>
        <Profile userId={1} />
      </Suspense>
    </ErrorBoundary>
  )
}