Bug: ESLint flags just refering (not calling) functions that use refs as accessing refs (react-hooks/refs)
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 251k
- Forks
- 51.4k
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 53
Description
React version: 19.2.8
ESLint version: 9.39.5
Node.js version; 24.20.0
Steps To Reproduce
- Run
npm run lintcommand at the root of the repository.
Link to code example: mikecat/next-read-function-using-ref-in-render: Next.js example where just refering (not calling) function that uses refs is marked as accessing refs during render
page.tsx:
import { useCallback, useState, useRef } from 'react';
export default function Home() {
const [sampleValue, setSampleValue] = useState(0);
const sampleRef = useRef(0);
const sampleFunc = useCallback(() => {
setSampleValue(++sampleRef.current);
}, []);
const [prevSampleFunc, setPrevSampleFunc] = useState<(() => void) | null>(null);
if (sampleFunc !== prevSampleFunc) {
setPrevSampleFunc(() => sampleFunc);
}
return null;
}
The current behavior
You will see this error message:
12:7 error Error: Cannot access refs during render
React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
C:\MyApps\temp\next-read-function-using-ref-in-render\app\page.tsx:12:7
10 |
11 | const [prevSampleFunc, setPrevSampleFunc] = useState<(() => void) | null>(null);
> 12 | if (sampleFunc !== prevSampleFunc) {
| ^^^^^^^^^^ Cannot access ref value during render
13 | setPrevSampleFunc(() => sampleFunc);
14 | }
15 | react-hooks/refs
The expected behavior
In this code, the function sampleFunc is just referred and not called during render.
Therefore, I don't think that this code is accessing refs during render as the error message suggests.
I expect this message, which looks like a false positive, isn't emitted for this code.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the TypeScript example in page.tsx and run npm run lint to reproduce the react-hooks/refs diagnostic. Trace how the rule handles referencing sampleFunc versus calling it, then verify that the warning is absent when the function is only referred to during render.
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
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 70/100