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

refactor: switch to useSyncExternalStoreWithSelector #1953

Merged
merged 21 commits into from May 13, 2022

Conversation

promer94
Copy link
Collaborator

@promer94 promer94 commented May 8, 2022

This PR is intented to solve the 'tearing' problem described in #794 for React 18.
Example for 'tearing' in React 18: https://codesandbox.io/s/concurrent-swr-case-iii-shu-s5fggt

It will also solve the cache initialization problem in StrictMode
#1904 https://codesandbox.io/s/swr-1904-mxfft8
#1949 https://codesandbox.io/s/swr-1949-22d6iw

limitations

Accroding to the useSES RFC

to prevent data races, you can't trigger a transition using a store update — updates to the store always render synchronously.

examples:
https://codesandbox.io/s/concurrent-swr-case-i-shu-dckwqj
https://codesandbox.io/s/concurrent-swr-case-ii-shu-3j5j2e

@promer94 promer94 changed the title WIP: switch useSyncExternalStoreWithSelector WIP: switch to useSyncExternalStoreWithSelector May 8, 2022
@codesandbox-ci
Copy link

codesandbox-ci bot commented May 8, 2022

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit f23117b:

Sandbox Source
SWR-Basic Configuration
SWR-States Configuration
SWR-Infinite Configuration
SWR-SSR Configuration
Concurrent SWR, Case III shu PR
swr #1904 PR
swr #1949 PR
Concurrent SWR, Case I Shu PR
Concurrent SWR, Case II shu PR

@koba04
Copy link
Collaborator

koba04 commented May 11, 2022

This would not be an appropriate place to ask, but currently SWR stores some information like a current key and store into useRef objects, which might be a problem with concurrent features as far as I know.

Should SWR migrate the usage of useRef objects like this PR does, or is it safe as long as useRef objects are updated in effects run in commit phases like useEffect and useLayoutEffect?

@promer94
Copy link
Collaborator Author

is it safe as long as useRef objects are updated in effects run in commit phases like useEffect and useLayoutEffect

As far as i know, updating ref in effect is concurrent safe.
and we will also use https://github.com/dai-shi/will-this-react-global-state-work-in-concurrent-rendering for testing

@promer94 promer94 marked this pull request as ready for review May 12, 2022 10:57
@promer94 promer94 changed the title WIP: switch to useSyncExternalStoreWithSelector feat: switch to useSyncExternalStoreWithSelector May 12, 2022
@promer94 promer94 changed the title feat: switch to useSyncExternalStoreWithSelector refactor: switch to useSyncExternalStoreWithSelector May 12, 2022
@@ -37,7 +37,7 @@ describe('useSWR - error', () => {
{ onError: (_, errorKey) => (erroredSWR = errorKey) }
)
if (error) return <div>{error.message}</div>
return <div>hello, {data}</div>
return <div><>hello, {data}</></div>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why do we adding Fragment here?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screen Shot 2022-05-13 at 07 34 10

Because the data is infered as Error here.

Copy link
Member

@huozhi huozhi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks and great work!
could you add more explanation about the links in PR description section?

how about move the swr/ dir to core/ or other dir that doesn't have the same name with repo?

Copy link
Member

@shuding shuding left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, this is incredible work!

@shuding shuding merged commit b8114e6 into vercel:shu/c96a May 13, 2022
promer94 added a commit to promer94/swr that referenced this pull request May 13, 2022
* type: extends useConfig cache interface (vercel#1938)

* remove mount check for react18 (vercel#1927)

reactwg/react-18#82

related pr vercel#787 vercel#433

* lint: dont check unused vars with underscore prefix (vercel#1939)

* test: upgrade to jest 28 (vercel#1942)

* Upgrade to jest 28

* Upgrade to jest 28

* feat: useSyncExternalStoreWithSelector

* refactor: remove stateUpdate and boardcast

state update should be handled by uSESW

* type: fix test type error

* remove pnpm.lock

* fix: import cjs for codesanbox

* refactor: add selector

* refactor: add cachestate interface and try fix custom cache

* fix: custom cache init

* refactor: remove useless flag

* chore: codesanbox ci

* refactor: remove force render in infinite

* build: add _internal

* chore: mark warning test

* fix: dts generation

* codesanbox ci

* chore: rename swr folder to core

Co-authored-by: Jiachi Liu <inbox@huozhi.im>
shuding added a commit that referenced this pull request May 13, 2022
* update state in a transition

* support snapshotting external state

* wip

* move types:check to pre-commit

* refactor: switch to useSyncExternalStoreWithSelector (#1953)

* type: extends useConfig cache interface (#1938)

* remove mount check for react18 (#1927)

reactwg/react-18#82

related pr #787 #433

* lint: dont check unused vars with underscore prefix (#1939)

* test: upgrade to jest 28 (#1942)

* Upgrade to jest 28

* Upgrade to jest 28

* feat: useSyncExternalStoreWithSelector

* refactor: remove stateUpdate and boardcast

state update should be handled by uSESW

* type: fix test type error

* remove pnpm.lock

* fix: import cjs for codesanbox

* refactor: add selector

* refactor: add cachestate interface and try fix custom cache

* fix: custom cache init

* refactor: remove useless flag

* chore: codesanbox ci

* refactor: remove force render in infinite

* build: add _internal

* chore: mark warning test

* fix: dts generation

* codesanbox ci

* chore: rename swr folder to core

Co-authored-by: Jiachi Liu <inbox@huozhi.im>

* chore: useSES should be external (#1960)

* rename type

* types: update cache types

* chore: move @types/useSES to devDependencies

Co-authored-by: Shu Ding <g@shud.in>
Co-authored-by: Jiachi Liu <inbox@huozhi.im>
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

Successfully merging this pull request may close these issues.

None yet

4 participants