software-mansion/react-native-gesture-handler

Gesture.Pan() causing excessive re-renders (too slow)

Vaib215 opened this issue · 2 comments

Vaib215 commented

Description

I am developing an open source chess game in expo similar to chess.com

I added a drag and drop pieces functionality which is working flawlessly on web version but is very laggy and non-usable in android (no clue about iOS). I guess the issue is the excessive re-renders caused by Gesture.Pan()

I found a similar issue in #2343 but it was closed.

Thanks in advance for your help.

Steps to reproduce

  1. Clone Repo
  2. Install Deps
  3. Run App on android
  4. Click on 'Play'
  5. Try dragging the pieces, the pan gesture is very slow, unusable and unnatural

Snack or a link to a repository

https://github.com/Vaib215/rnchess

Gesture Handler version

2.14.0

React Native version

0.73.4

Platforms

Android, iOS, Web, MacOS

JavaScript runtime

None

Workflow

Expo managed workflow

Architecture

None

Build type

Debug mode

Device

Real device

Device model

Lava Agni 2 5G

Acknowledgements

Yes

j-piasecki commented

I looked at your code, and it's true that the Pan gesture is causing a re-render on every update, but that's because you're updating the state on every update: https://github.com/Vaib215/rnchess/blob/abe072f82b5cc87c1357849d2e5935f8e1fe865d/hooks/use-chess.tsx#L410. That's exactly what should happen when you do this: https://react.dev/reference/react/useState#setstate

If you want to avoid re-rendering the component during animations, you should look into react-native-reanimated, which automatically integrates with Gesture Handler and allows you to perform gesture-based animations on UI thread.

Vaib215 commented

Thanks for you help! I did apply the logic and yes i got it working flawlessly. Anyone who want to check solution can look at this file
https://github.com/Vaib215/rnchess/blob/main/hooks/use-chess.tsx