Table components: Refs are not set in first render
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
### Provide a general summary of the issue here
When using refs with Table components, the data isn't set on first render. Minimal example:
```ts
import { useEffect, useRef } from "react"
import {
Cell,
Column,
Row,
Table,
TableBody,
TableHeader,
} from "react-aria-components"
import type { ColumnProps } from "react-aria-components"
const MyColumn = (props: ColumnProps) => {
const ref = useRef(null)
useEffect(() => {
console.log(ref) // Logs "{ current: null }"
}, [])
return
}
const Component = () => (
Hello world
A cell
)
```
There is a slightly hacky workaround that works. React state setters satisfy the RefCallback type, so you can just make it reactive and do this:
```ts
const MyColumn = (props: ColumnProps) => {
const [ref, setRef] = useState(null)
useEffect(() => {
console.log(ref)
}, [ref])
return
}
```
But if this is the solution, it should really be mentioned in the docs or supported explicitly with a custom `useTableRef` hook.
### 🤔 Expected Behavior?
Refs should be available in effects on first render.
### 😯 Current Behavior
Ref is null on first render.
### 💁 Possible Solution
1. If this is caused by Table's computation model introducing weird timing, look into adjusting that
2. If 1 is not possible, document the behaviour and/or export a custom `useTableRef` hook to help with it
### 🔦 Context
Standard ref usage with Table components doesn't work, and we need strange workarounds to fit with it.
### 🖥️ Steps to Reproduce
https://codesandbox.io/p/devbox/zealous-joana-l7dvvy
### Version
"react-aria-components": "^1.13.0"
### What browsers are you seeing the problem on?
Chrome, Safari
### If other, please specify.
_No response_
### What operating system are you using?
macOS 26.1
### 🧢 Your Company/Team
_No response_
### 🕷 Tracking Issue
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.