Suspense Build Fails to Detect useSearchParams() in Prop-Passed Components

[hyonun321]

Summary

When detecting useSearchParams() at build time with Suspense, does the detection fail if the component is passed and used as a prop?

detect

export function A() {
  return (
    <Flex
      direction="column"
      gap={8}
      style={{ marginTop: '8px', marginBottom: '16px' }}
    >
      <SearchBar />
      <DataTable />
    </Flex>
  );
}

detect fail

export function B() {
  return (
    <TableLayout
      searchSection={<SearchBar />}
      tableSection={<DataTable />}
    />
  );
}

Each SearchBar component uses useSearchParams() internally, but case B does not fail during the build (it passes even without Suspense).
Also, there is no Suspense inside .

Additional information

useSearchParams() should be wrapped in a suspense boundary at page "/A". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout

Example

No response

[JeevanYewale]

This is a known behavior with Next.js build-time detection. When components are passed as props, the static analysis can't detect useSearchParams() usage at build time.

Why this happens:

• Case A: Direct component usage - Next.js can statically analyze and detect useSearchParams()
• Case B: Component passed as prop - Static analysis fails to detect the hook usage

Solutions:

1. Add Suspense boundary manually in case B:

export function B() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <TableLayout
        searchSection={<SearchBar />}
        tableSection={<DataTable />}
      />
    </Suspense>
  );
}

[hyonun321]

Thank you so much !!