Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

no component rerender on React Native Hermes engine with disabled suspense and useQuery #1179

Open
Nlcke opened this issue Oct 18, 2022 · 6 comments

Comments

@Nlcke
Copy link

Nlcke commented Oct 18, 2022

Hello and thanks for great library!
We are using useQuery hook in React Native framework with Hermes engine and suspense: false option.

"gqty": "2.3.0"
"@gqty/react": "3.0.0-alpha-74109b4.0" (suspense: false)
"react": "18.1.0"
"react-native": "0.70.2" (Hermes engine enabled)
OS: Android

When using V8 engine (enabled in debug mode) everything is fine, however something is wrong with useQuery on Hermes engine. Components do not rerender when receiving server response. We are found useDeferDispatch function doesn't work properly inside @gqty/react/common.js maybe due to some effects/promises/timeouts race.

As a workaround we are currently using patch-package with following patch, it works fine for our requests:
@gqty+react+3.0.0-alpha-74109b4.0.patch

diff --git a/node_modules/@gqty/react/common.js b/node_modules/@gqty/react/common.js
index 5d70f2b..0529ad0 100644
--- a/node_modules/@gqty/react/common.js
+++ b/node_modules/@gqty/react/common.js
@@ -90,13 +90,22 @@ function useDeferDispatch(dispatchFn) {
           if (isMounted.current)
             dispatchFn(...args);
         });
+      } else {
+        pendingDispatch.current = [
+          () => {
+            if (isMounted.current)
+              dispatchFn(...args);
+          }
+        ];
       }
-      pendingDispatch.current = [
-        () => {
-          if (isMounted.current)
-            dispatchFn(...args);
+      Promise.resolve().then(() => {
+        if (pendingDispatch.current) {
+          for (const fn of pendingDispatch.current) {
+            fn();
+          }
+          pendingDispatch.current = false;
         }
-      ];
+      });
     } else if (isMounted.current) {
       dispatchFn(...args);
     }

Please help to make it work properly on Hermes engine.

@vicary vicary mentioned this issue Nov 10, 2022
8 tasks
@bkniffler
Copy link
Contributor

Whats the status on this @vicary ? We're facing similar issues on the useTransactionQuery. It works when replacing

const dispatch = useDeferDispatch(dispatchReducer);

with

const dispatch = dispatchReducer;
Screen.Recording.2023-02-22.at.12.05.15.mov

@vicary
Copy link
Member

vicary commented Feb 22, 2023

@bkniffler Hermes needs it's own care, especially when paired with concurrency mode and suspense.

When I start working on this one I'll crunch through all the workarounds and make it stable.

@bkniffler
Copy link
Contributor

bkniffler commented Feb 22, 2023

Sorry for not being clear, its not about hermes in my case, its about the useDeferDispatch hook in general (on web in my case). @vicary

@vicary
Copy link
Member

vicary commented Feb 22, 2023

@bkniffler Is it only happening in response to user interactions? Please help me reproduce this by updating this one https://stackblitz.com/edit/nextjs-nzmtym?file=pages/index.tsx

@bkniffler
Copy link
Contributor

I've tried to reproduce it, but unfortunately couldn't. Would have to dig deeper into this, but its surely an issue with the dispatch.

@vicary
Copy link
Member

vicary commented Feb 23, 2023

Please take your time, depends on the result I may move it to a separate issue for easier tracking.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants