Samuel
#reactnative question: is this an acceptable way to use RNGH? I don't want the identity of `nativeGesture` to change, so as `drawerGesture` changes I just keep adding them endlessly in an effect seems cursed but fixes a gnarly perf problem!
function DrawerGestureRequireFail({children}: {children: React.ReactNode}) { const drawerGesture = useContext(DrawerGestureContext) const nativeGesture = useMemo(() => Gesture.Native(), []) // the drawer gesture identity changes whenever the drawer opens/closes, // but we don't want the GestureDetector to rerender when that happens // therefore we just keep adding the gestures every time it changes to the same // native gesture -sfn useEffect(() => { if (drawerGesture) { nativeGesture.requireExternalGestureToFail(drawerGesture) } // TODO: figure out how to clean this up }, [drawerGesture, nativeGesture]) return <GestureDetector gesture={nativeGesture}>{children}</GestureDetector> } 2 22
Samuel
I can't tell if it's a problem that it'll leave a pile dead gestures attached to it. like I guess they'll never be garbage collected
2 2
Samuel
hmmmm. the real question is: why is something that should be entirely UI thread getting janked up by the JS thread? looking at the drawer code, it looks like it calls `runOnJS` *prior* to triggering the animation. maybe we should start the anim first also, these are optional callbacks 🤔
react-navigation/packages/react-native-drawer-layout/src/views/Drawer.native.tsx at main · react-navigation/react-navigation
Routing and navigation for React Native and Web apps - react-navigation/react-navigation
github.com
 1 2
Samuel
yeah lol this completely works on device. love a one-liner will open a pr with react navigation and finally end the scourge of every react native app having laggy drawers 😇
2 9
Samuel
3 lessons here 1. remember to profile your stuff 2. profiling isn’t everything, think deeply about what’s *actually* going on 3. if your fix is suspicious (telltale signs: useEffect, setTimeout, eslint-ignore) it probably is not the optimal solution, and you should keep digging
4 2 13
puelocesar.bsky.social
I'm currently struggling with profiling after latest react native updates. Before, I would connect with normal chrome dev tools, and get this beautiful flame chart, which was very good to find bottlenecks in the legacy JS code I maintain. Now, that's gone, and the new one works very differently
1 1
Samuel
that’s not the react profiler, that’s the chrome profiler. I also had this issue - you need to make sure the react devtools are installed in chrome for all profiles
1
puelocesar.bsky.social
I thought chrome dev tools support was removed from newer versions of react native At least my setup completely stopped working after I updated
1
Samuel
@samuel.fm
no chrome dev tools is the blessed one now if I understand correctly. it *should* work
2
puelocesar.bsky.social
github.com/react-native... See the compatibility session: Chrome Browser DevTools — unsupported Connecting to React Native via chrome://inspect is no longer supported. -- Now you are forced to use the React Native DevTools, which is almost the same, but lacks the profiler
[0.76] React Native DevTools — Issues and Feedback · react-native-community discussions-and-proposals · Discussion #819
Introduction In React Native 0.76, we're shipping the first stable release of React Native DevTools, our new debugging experience for React Native apps using Hermes. React Native DevTools features:...
github.com
 1
Samuel
oh I see. that's very confusing anyway the profiler should be in there