You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I'm running into an issue with the new React Compiler and RNGH gesture callbacks that I wanted to discuss with the community.
The Issue
The React Compiler is throwing warnings on gesture callback handlers like .onStart(), .onEnd(), etc., claiming that refs are being accessed during render:
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.
The Problem
The React Compiler doesn't seem to understand that:
These gesture callbacks are not executed during render
They're asynchronous event handlers that run when gestures are detected
Similar to how onPress in a TouchableOpacity works
Current Workaround
I can suppress the warning with // eslint-disable-next-line react-compiler/react-compiler, but this causes the compiler to skip the entire file, which defeats the purpose of using the React Compiler for future React optimizations.
Questions for the Community
Has anyone else encountered this? How are you handling RNGH + React Compiler compatibility?
Is the team aware of this issue? Are there plans to address it in future versions?
Alternative approaches? Is there a way to structure gesture handlers that plays better with the React Compiler?
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
Uh oh!
There was an error while loading. Please reload this page.
-
Hey everyone!
I'm running into an issue with the new React Compiler and RNGH gesture callbacks that I wanted to discuss with the community.
The Issue
The React Compiler is throwing warnings on gesture callback handlers like
.onStart()
,.onEnd()
, etc., claiming that refs are being accessed during render:Error:
The Problem
The React Compiler doesn't seem to understand that:
onPress
in aTouchableOpacity
worksCurrent Workaround
I can suppress the warning with
// eslint-disable-next-line react-compiler/react-compiler
, but this causes the compiler to skip the entire file, which defeats the purpose of using the React Compiler for future React optimizations.Questions for the Community
Has anyone else encountered this? How are you handling RNGH + React Compiler compatibility?
Is the team aware of this issue? Are there plans to address it in future versions?
Alternative approaches? Is there a way to structure gesture handlers that plays better with the React Compiler?
Beta Was this translation helpful? Give feedback.
All reactions