using useTransition, Suspense , SuspenseList with redux state

[abdoutech93]

What is the new or updated feature that you are suggesting?

In Concurrent Mode, it important to permit the use of the new features on react 18 such as startTransition and suspense for deffered loading and also the new component SuspenseList to improve performance and the app loading.

Calling startTransition with redux state causes an exception startTransition is not a function

Why should this feature be included?

In my case my home page contains a lot of data, so the loading is slow and the UI is not as smooth as it should be during the loading even if the component is loaded but because the entire page is not fully loaded yet is not possible to click and navigate on the page and this is because of state changes.

What docs changes are needed to explain this?

adding all this to docs allows people using redux to using this feature.

[markerikson]

It's not clear what you're actually suggesting here. Can you clarify the question, and ideally provide a CodeSandbox that demonstrates what you're seeing?

Note that React-Redux v7 is not considered Concurrent/Suspense-compatible - see #1740 and #1732 for discussion.

[abdoutech93]

A practical case is that I'm using React-Redux 7 and React 18 with connect. to improve my app performance I'm trying Suspense but I'm getting some runtime exceptions like : startTransition is not a function.
So, if I suppose that suspence and startTransition are some of the major changes on react 18, I suggest to avoid this issues in ordre to allow to people to use it with redux.

this is a working example from the react official docs : https://codesandbox.io/s/usetransition-useeffect-issues-ccq5e?file=/src/index.js:642-658

and this is a test with redux and it's getting the same exception I mentioned : https://codesandbox.io/s/test-redux-in-concurrent-mode-with-react-redux-pytbh

[markerikson]

Like I just said, React-Redux v7 is not ready for use with React 18. The basic behavior should be passable, but we definitely haven't done anything to try to check its behavior with useTransition.

There's no point in adding warnings to the docs yet, because React 18 isn't out and won't be out for a while and it's still very clearly labeled as "Experimental/Alpha". We're working with the React team to figure out what does need to be done to make React-Redux v8 more compatible with React 18, and we'll keep everyone updated as we figure things out.

Glancing at the sandbox, I think your sandbox code is buggy. It's assuming that useTransition returns [startTransition, isPending], but the React team recently switched the ordering to be [isPending, startTransition] for consistency with the other hooks:

facebook/react#20976

Change your code to be const [t, isPending] = React.useTransition() and that error should go away - this part has nothing to do with Redux.

[markerikson]

Closing because I think this was a bug with the original sandbox.

[opensrc0]

@markerikson Now react 18 is live and soon we will get the react 18.2.0. Will redux support react 18.X.X in near future ?

[phryneas]

@hdlion react-redux 8 with Redux 18 support is out for quite a while by now.

[opensrc0]

I'm getting error while using suspense and redux.

Uncaught Error: This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering. The usual way to fix this is to wrap the original update in startTransition.

Because component state is going to update and render function is called. I have used a component in side render function which is using suspense so It is getting update in suspense.

I don't know when the redux state will update, How could I stop to send an update to child component which is using suspense?

[markerikson]

@hdlion if you're seeing problems, please put together a CodeSandbox, Github repo, or Replay ( https://replay.io/record-bugs ) that actually shows the problem happening and file a new issue.

That said: if you're doing SSR and calling hydrateRoot(), you need to be using React-Redux v8, and pass in the serialized data as the new <Provider store={store} serverState={serializedData} /> prop, in order to get consistent behavior.

[sachTyagi]

I am facing the similar issue.

Uncaught Error: This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering. The usual way to fix this is to wrap the original update in startTransition.

Tried to use <Provider store={store} serverState={initialData} /> on client side. Any suggestions ? @markerikson