react / react/react

Bug: ESLint flags just refering (not calling) functions that use refs as accessing refs (react-hooks/refs)

Open
#37,521 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Status: Unconfirmed
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

  1. Run npm run lint command 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.