react icon indicating copy to clipboard operation
react copied to clipboard

[Compiler]: Ref values (the `current` property) may not be accessed during render - showing error message for custom hooks

Open gkiely opened this issue 1 year ago • 3 comments

What kind of issue is this?

  • [ ] React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization)
  • [ ] babel-plugin-react-compiler (build issue installing or using the Babel plugin)
  • [X] eslint-plugin-react-compiler (build issue installing or using the eslint plugin)
  • [ ] react-compiler-healthcheck (build issue installing or using the healthcheck script)

Link to repro

https://github.com/gkiely/react-eslint-vite

Repro steps

git clone https://github.com/gkiely/react-eslint-vite
npm i 
npm run lint

Each of these show an error message:

  • Pass a ref to a custom hook
  • Set ref.current inside a useCallback and pass to a custom hook
  • useImperativeHandle

How often does this bug happen?

Every time

What version of React are you using?

19.0.0-rc-6ebfd5b0-20240818

gkiely avatar Aug 19 '24 17:08 gkiely

Related: https://github.com/facebook/react/pull/30716

gkiely avatar Aug 19 '24 17:08 gkiely

What kind of issue is this?

  • [ ] React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization)
  • [ ] babel-plugin-react-compiler (build issue installing or using the Babel plugin)
  • [x] eslint-plugin-react-compiler (build issue installing or using the eslint plugin)
  • [ ] react-compiler-healthcheck (build issue installing or using the healthcheck script)

Link to repro

https://github.com/gkiely/react-eslint-vite

Repro steps

git clone https://github.com/gkiely/react-eslint-vite
npm i 
npm run lint

Each of these show an error message:

  • Pass a ref to a custom hook
  • Set ref.current inside a useCallback and pass to a custom hook
  • useImperativeHandle

How often does this bug happen?

Every time

What version of React are you using?

19.0.0-rc-6ebfd5b0-20240818

Bro can I work on this .

mathewalexKerala avatar Aug 20 '24 15:08 mathewalexKerala

To maybe save other people some time (I spent hours suppressing eslint warnings) it looks like this error is going to be disabled from the eslint plugin until it is more mature: https://github.com/facebook/react/pull/30843/files

lukpsaxo avatar Sep 04 '24 13:09 lukpsaxo

most if not all these issues have been fixed in the latest release (works for me anyway...)

lukpsaxo avatar Sep 25 '24 14:09 lukpsaxo

Agreed this fixes the issues outlined in my example repo. Closing.

I suspect there will some migration issues around the read/write refs in render rule now being enforced, but it's outside the scope of this issue and looks like it will be discussed in #30782

gkiely avatar Sep 25 '24 16:09 gkiely