Skip to content

Performance of useSyncExternalStore and React transitions #2086

Open
@OliverJAsh

Description

@OliverJAsh

What version of React, ReactDOM/React Native, Redux, and React Redux are you using?

  • React: 18.2.0 (latest at time of writing)
  • Redux: 4.2.1 (latest at time of writing)
  • React Redux: 8.1.3 (latest at time of writing)

What is the current behavior?

Reduced test case: https://github.com/OliverJAsh/react-redux-useSyncExternalStore-perf

Despite wrapping calls to dispatch with startTransition, React will always render Redux state updates synchronously. This is in contrast to regular React state updates.

I suspect this is due to the behaviour of useSyncExternalStore. However I was wondering if you're aware of any plans for this to be addressed, either in React Redux somehow or React itself?

As it stands I think this is a significant performance issue. For example, here's a performance recording from Unsplash (the application I work on). We're able to benefit from concurrent rendering and "time slicing" for hydration, but then once hydration has finished we need to run some state updates through Redux, and this results in this very long task (hovered):

image

It would be great if we could benefit from transitions / concurrent rendering / time slicing.

In our case at Unsplash, if we could figure out a way to make these states updates non-blocking then we could significantly improve our page load performance and metrics such as TBT, TTI, and ITP.

If it helps, here's a demo of my reduced test case, comparing state updates for React vs Redux (both wrapped in startTransition). Each state update renders 10 components, each taking 100ms.

283576776-7417d43a-0e3a-4193-b93a-ed10a6573277.2.mov

What is the expected behavior?

N/A

Which browser and OS are affected by this issue?

No response

Did this work in previous versions of React Redux?

  • Yes

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions