adobe / adobe/react-spectrum

`RouterProvider`'s `useHref` prop incompatible with `react-compiler` ESLint plugin

Open
#7,220 2 comments 3 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

Copying the example from https://react-spectrum.adobe.com/react-aria/routing.html#routerprovider gives `Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values` from the ESLint plugin

### 🤔 Expected Behavior?

API of the context provider should not cause ESLint violation

### 😯 Current Behavior

It does

### 💁 Possible Solution

Rename the prop?

### 🔦 Context

https://react.dev/blog/2024/10/21/react-compiler-beta-release

>We recommend everyone use the React Compiler linter today

### 🖥️ Steps to Reproduce

The starters don't have ESLint set up. But I don't think it's needed?

### Version

3.25.3

### What browsers are you seeing the problem on?

Other

### If other, please specify.

ESLint, so Node?

### What operating system are you using?

N/A

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the RouterProvider API and its useHref prop as shown in the linked React Aria routing example, then reproduce the warning with the react-compiler ESLint plugin. Done means the documented example no longer triggers the reported hook-reference violation and the resulting API behavior is verified.

Written by the indexing model from the issue text.

Assessment

Tech stack
eslint, react, typescript
Domain
frontend, tooling
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.