Table not rendering correctly with React Suspense

[jeffijoe]

Provide a general summary of the issue here

When using React Suspense (client side only), the table does not render correctly. It only renders a single column from the header on first render. See CodeSandbox.

In some scenarios, this causes the following error:

Error: Cell count must match column count. Found 3 cells and 1 columns.

🤔 Expected Behavior?

The table should work with Suspense.

😯 Current Behavior

The table only renders the first column when inside a Suspense boundary that is triggered.

💁 Possible Solution

No response

🔦 Context

We use Suspense to lazy-load views.

🖥️ Steps to Reproduce

• Open the CodeSandbox.
• Observe the last table does not render its data until it is subsequently rerendered.

Version

RAC 1.12.2

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macOS Tahoe

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[thebuilder]

Getting an issue that might be related to this, after upgrading from 1.11.0.

Using Next.js (15.5.3), navigating to a page with a Table, the table only outputs the first tr (but without any cells).

• Reloading/deeplinking to the page, and the table is rendered correctly
• It correctly loops over all the items, and the data is correct.
• Only happens in production build

Tried downgrading to 1.11.0, and it correctly renders all the rows again

[jeffijoe]

Thanks @thebuilder - I had a hunch it was a regression because it worked fine before.

Strict Mode seems to mask this, its why it works locally and not in production.

[jeffijoe]

As a temporary workaround, passing a key to the <Table> component that changes after initial render seems to make it work, at least for client-side.

import { useLayoutEffect, useRef, useState } from 'react'

/**
 * Returns a `key` to pass to a React Aria-based table
 * to work around https://github.com/adobe/react-spectrum/issues/8906
 *
 * Delete this file once an official fix has been released.
 */
export function useDoubleRenderHack() {
  const [key, set] = useState(0)
  const hackedRef = useRef(false)
  useLayoutEffect(() => {
    if (hackedRef.current) {
      return
    }
    set(1)
    hackedRef.current = true
  }, [])
  return key
}

<Table key={useDoubleRenderHack()}>

[devongovett]

I think we already fixed this in #8892. You can try the nightly version to verify it works for you. We're working on a release for it soon.

[jeffijoe]

@devongovett can confirm, nightly build works! 🙏