dai-shi / will-this-react-global-state-work-in-concurrent-rendering

Test tearing and branching in React concurrent rendering

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

React 18 version which has `useSyncExternalStore()`

brainkim opened this issue · comments

Do you have a branch of the repository which has a version of React which has the new useSyncExternalStore functionality? I’m trying to use the use-sync-external-store package but can’t seem to get the shim to not be used yet.

The warning:

use-sync-external-store.development.js:52 Warning: You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release.

Screen Shot 2021-09-09 at 5 58 11 PM

I’ve tried installing multiple versions of React @next and @experimental and clearing node_modules/yarn cache clean, but haven’t figured it out yet.

Simply, I don't think it's released yet.

Here's a link to my experiment with React 17: https://twitter.com/dai_shi/status/1434131745700417540

That was my suspicion, thanks! I’ve also noticed tearing getting worse when the shim is used, so hopefully this gets sorted out.

It seems like useSyncExternalStore is shipped in the experimental branches. It’s tricky to get it all working because it seems like you have to use exact versions or some random React alpha is requested instead.

diff --git a/package.json b/package.json
index 8122d02..662f7dc 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@apollo/client": "^3.4.10",
+    "@apollo/client": "/Users/briankim/Work/apollo-client/dist/apollo-client-3.5.0-beta.13.tgz",
     "@react-rxjs/core": "^0.8.3",
     "@simplux/core": "^0.17.0",
     "@simplux/react": "^0.17.0",
@@ -49,8 +49,8 @@
     "effector-react": "^22.0.4",
     "graphql": "^15.5.2",
     "jotai": "^1.3.2",
-    "react": "^18.0.0-alpha-1314299c7-20210901",
-    "react-dom": "^18.0.0-alpha-1314299c7-20210901",
+    "react": "^0.0.0-experimental-67222f044-20210915",
+    "react-dom": "^0.0.0-experimental-67222f044-20210915",
     "react-hooks-global-state": "^1.0.2",
     "react-redux": "^7.2.5",
     "react-tracked": "^1.7.4",

This got me a useSyncExternalStore() version (ignore the Apollo Client stuff).

Closing as resolved! Thanks!