adobe / adobe/react-spectrum

Table components: Refs are not set in first render

Open
#9,325 5 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.