fix(core): improve re-render behavior with useTransition #1139

dai-shi · 2022-05-04T13:06:51Z

vercel · 2022-05-04T13:06:53Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
jotai	✅ Ready (Inspect)	Visit Preview	May 9, 2022 at 4:09AM (UTC)

codesandbox-ci · 2022-05-04T13:07:47Z

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 54df141:

Sandbox	Source
React	Configuration
React Typescript	Configuration
React Browserify	Configuration
React Snowpack	Configuration
Next.js	Configuration
Next.js with custom Babel config	Configuration
React with custom Babel config	Configuration

github-actions · 2022-05-04T13:09:04Z

Size Change: -9 B (0%)

Total Size: 134 kB

Filename	Size	Change
`dist/esm/index.js`	5.45 kB	-2 B (0%)
`dist/index.js`	6.24 kB	-2 B (0%)
`dist/system/index.development.js`	5.67 kB	-3 B (0%)
`dist/system/index.production.js`	3.03 kB	+1 B (0%)
`dist/umd/index.development.js`	6.34 kB	-2 B (0%)
`dist/umd/index.production.js`	3.28 kB	-1 B (0%)

ℹ️ View Unchanged

Filename	Size
`dist/babel/plugin-debug-label.js`	881 B
`dist/babel/plugin-react-refresh.js`	1.1 kB
`dist/babel/preset.js`	1.33 kB
`dist/devtools.js`	3.41 kB
`dist/esm/babel/plugin-debug-label.js`	711 B
`dist/esm/babel/plugin-react-refresh.js`	924 B
`dist/esm/babel/preset.js`	1.15 kB
`dist/esm/devtools.js`	2.6 kB
`dist/esm/immer.js`	609 B
`dist/esm/optics.js`	661 B
`dist/esm/query.js`	1.25 kB
`dist/esm/redux.js`	251 B
`dist/esm/urql.js`	1.5 kB
`dist/esm/utils.js`	5.08 kB
`dist/esm/valtio.js`	526 B
`dist/esm/xstate.js`	1.13 kB
`dist/esm/zustand.js`	284 B
`dist/immer.js`	726 B
`dist/optics.js`	938 B
`dist/query.js`	1.36 kB
`dist/redux.js`	314 B
`dist/system/babel/plugin-debug-label.development.js`	818 B
`dist/system/babel/plugin-debug-label.production.js`	618 B
`dist/system/babel/plugin-react-refresh.development.js`	1.02 kB
`dist/system/babel/plugin-react-refresh.production.js`	798 B
`dist/system/babel/preset.development.js`	1.25 kB
`dist/system/babel/preset.production.js`	990 B
`dist/system/devtools.development.js`	2.76 kB
`dist/system/devtools.production.js`	1.97 kB
`dist/system/immer.development.js`	733 B
`dist/system/immer.production.js`	469 B
`dist/system/optics.development.js`	765 B
`dist/system/optics.production.js`	455 B
`dist/system/query.development.js`	1.4 kB
`dist/system/query.production.js`	963 B
`dist/system/redux.development.js`	339 B
`dist/system/redux.production.js`	217 B
`dist/system/urql.development.js`	1.65 kB
`dist/system/urql.production.js`	1.2 kB
`dist/system/utils.development.js`	5.42 kB
`dist/system/utils.production.js`	3.5 kB
`dist/system/valtio.development.js`	639 B
`dist/system/valtio.production.js`	400 B
`dist/system/xstate.development.js`	1.25 kB
`dist/system/xstate.production.js`	805 B
`dist/system/zustand.development.js`	372 B
`dist/system/zustand.production.js`	235 B
`dist/umd/babel/plugin-debug-label.development.js`	1.03 kB
`dist/umd/babel/plugin-debug-label.production.js`	776 B
`dist/umd/babel/plugin-react-refresh.development.js`	1.24 kB
`dist/umd/babel/plugin-react-refresh.production.js`	931 B
`dist/umd/babel/preset.development.js`	1.47 kB
`dist/umd/babel/preset.production.js`	1.12 kB
`dist/umd/devtools.development.js`	3.52 kB
`dist/umd/devtools.production.js`	2.39 kB
`dist/umd/immer.development.js`	871 B
`dist/umd/immer.production.js`	570 B
`dist/umd/optics.development.js`	1.08 kB
`dist/umd/optics.production.js`	671 B
`dist/umd/query.development.js`	1.5 kB
`dist/umd/query.production.js`	1.03 kB
`dist/umd/redux.development.js`	454 B
`dist/umd/redux.production.js`	322 B
`dist/umd/urql.development.js`	1.71 kB
`dist/umd/urql.production.js`	1.17 kB
`dist/umd/utils.development.js`	6.48 kB
`dist/umd/utils.production.js`	3.99 kB
`dist/umd/valtio.development.js`	722 B
`dist/umd/valtio.production.js`	500 B
`dist/umd/xstate.development.js`	1.33 kB
`dist/umd/xstate.production.js`	845 B
`dist/umd/zustand.development.js`	479 B
`dist/umd/zustand.production.js`	334 B
`dist/urql.js`	1.56 kB
`dist/utils.js`	6.3 kB
`dist/valtio.js`	586 B
`dist/xstate.js`	1.19 kB
`dist/zustand.js`	344 B

_{compressed-size-action}

dai-shi · 2022-05-04T13:13:18Z

@riemonyamada Hi, do you happen to be interested in working on this issue?

hirokibeta · 2022-05-04T20:45:02Z

Hi @dai-shi. I'm not very familiar with React 18, but I'll try it next week.

hirokibeta · 2022-05-09T01:16:54Z

The cause of this problem is that flushPending is triggered from within suspensePromise. Updating state in an asynchronous context is reflected immediately because it is not recognized as triggered from within startTransition.

Removing flushPending from suspensePromise solves this problem.

I don't think this change to cause any other problems, because the resolution of suspensePromise triggers a rerender anyway, but do you have any concerns?

dai-shi · 2022-05-09T03:53:42Z

@riemonyamada Thanks for the investigation.
I guess there was a reason we have flushPending there, but not sure.
Let's see how tests pass/fail with removing it.

dai-shi · 2022-05-09T04:57:15Z

Although I had a occasional error locally, CI passes without problems.

 FAIL  tests/dependency.test.tsx
  ● works a primitive atom and a dependent async atom

    Unable to find an element with the text: count: 3, doubled: 6. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

    Ignored nodes: comments, <script />, <style />
    <body>
      <div>
        <div
          style="display: none;"
        >
          count: 
          2
          , doubled: 
          4
        </div>
        <button
          style="display: none;"
        >
          button
        </button>
        loading
      </div>
    </body>

      85 |   fireEvent.click(getByText('button'))
      86 |   await findByText('loading')
    > 87 |   await findByText('count: 3, doubled: 6')
         |         ^
      88 | })
      89 |
      90 | it('should keep an atom value even if unmounted', async () => {

      at waitForWrapper (node_modules/@testing-library/dom/dist/wait-for.js:187:27)
      at node_modules/@testing-library/dom/dist/query-helpers.js:101:33
      at findByText (tests/dependency.test.tsx:87:9)
      at tryCatch (node_modules/regenerator-runtime/runtime.js:63:40)
      at Generator.invoke [as _invoke] (node_modules/regenerator-runtime/runtime.js:294:22)
      at Generator.next (node_modules/regenerator-runtime/runtime.js:119:21)
      at asyncGeneratorStep (tests/dependency.test.tsx:19:28)
      at _next (tests/dependency.test.tsx:37:17)


Test Suites: 1 failed, 49 passed, 50 total
Tests:       1 failed, 10 skipped, 274 passed, 285 total
Snapshots:   19 passed, 19 total
Time:        11.918 s

dai-shi

The change looks okay. I hope our tests cover well. 🤞
Thanks @riemonyamada !

dai-shi · 2022-05-09T05:44:54Z

https://codesandbox.io/s/boring-torvalds-cn7lxn
confirmed the original sandbox is also fixed.

add test

95aab6b

Removing flushPending from suspensePromise

5eb6a4b

vercel bot deployed to Preview May 9, 2022 03:54 View deployment

conditional transition test

54df141

vercel bot deployed to Preview May 9, 2022 04:09 View deployment

dai-shi commented May 9, 2022

View reviewed changes

dai-shi changed the title ~~wip: add test for #1125~~ fix(core): improve re-render behavior with useTransition May 9, 2022

dai-shi added this to the v1.6.6 milestone May 9, 2022

dai-shi merged commit c0e1b09 into main May 10, 2022

dai-shi deleted the fix/issue-1125 branch May 10, 2022 12:29

renovate bot mentioned this pull request Sep 12, 2023

chore(deps): update dependency jotai to v2 qlik-oss/react-native-carbon#81

Open

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(core): improve re-render behavior with useTransition #1139

fix(core): improve re-render behavior with useTransition #1139

dai-shi commented May 4, 2022 •

edited

Loading

vercel bot commented May 4, 2022 •

edited

Loading

codesandbox-ci bot commented May 4, 2022 •

edited

Loading

github-actions bot commented May 4, 2022 •

edited

Loading

dai-shi commented May 4, 2022 •

edited

Loading

hirokibeta commented May 4, 2022

hirokibeta commented May 9, 2022

dai-shi commented May 9, 2022

dai-shi commented May 9, 2022

dai-shi left a comment

dai-shi commented May 9, 2022

fix(core): improve re-render behavior with useTransition #1139

fix(core): improve re-render behavior with useTransition #1139

Conversation

dai-shi commented May 4, 2022 • edited Loading

vercel bot commented May 4, 2022 • edited Loading

codesandbox-ci bot commented May 4, 2022 • edited Loading

github-actions bot commented May 4, 2022 • edited Loading

dai-shi commented May 4, 2022 • edited Loading

hirokibeta commented May 4, 2022

hirokibeta commented May 9, 2022

dai-shi commented May 9, 2022

dai-shi commented May 9, 2022

dai-shi left a comment

Choose a reason for hiding this comment

dai-shi commented May 9, 2022

dai-shi commented May 4, 2022 •

edited

Loading

vercel bot commented May 4, 2022 •

edited

Loading

codesandbox-ci bot commented May 4, 2022 •

edited

Loading

github-actions bot commented May 4, 2022 •

edited

Loading

dai-shi commented May 4, 2022 •

edited

Loading