React Compiler False Positive with Gesture Callbacks

[Pnlvfx]

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:

const doubleTap = Gesture.Tap()
  .maxDuration(250)
  .numberOfTaps(2)
  .maxDelay(200)
  .onStart(event => {  // ⚠️ Compiler warning here
    runOnJS(handleDoubleTap)(event);
  });

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.

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

1. Has anyone else encountered this? How are you handling RNGH + React Compiler compatibility?

2. Is the team aware of this issue? Are there plans to address it in future versions?

3. Alternative approaches? Is there a way to structure gesture handlers that plays better with the React Compiler?

[voxlz]

Have the same issue

[m-bert]

Is the team aware of this issue? Are there plans to address it in future versions?

We are aware of the issues with compiler. One of the improvements in Gesture Handler 3 will be support for React Compiler. You can try beta version and let us know if it works for you 😅