A component suspended while responding to synchronous input

Question

error Error: A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition.

I want to retain previous state of Component A when I navigate from Component B to A. In React v17 and React Router v5, I was able to achieved the previous state. But with React v18, I'm getting the above erorr. Any Idea?

Component A:

const ComponentA = React.lazy(() => import('./ComponentA'));

const App = () => (
  <Suspense fallback={<Loader/>}>
     <Provider store={store}>
       <ComponentA/>
     </Provider>
  </Suspense>
)

Component B: const ComponentB = React.lazy(() => import('./ComponentB'));

const App = () => (
  <Suspense fallback={<Loader/>}>
     <Provider store={store}>
       <ComponentB/>
     </Provider>
  </Suspense>
)

Node: v16.14.2 React: v18 React Router: v6

Redux v8 not support for React v18 https://github.com/reduxjs/react-redux/issues/1740

Answer 1

I was also facing a similar issue, adding a parent Suspense fixed it for me. Something like this:

<Suspense fallback={<Loader />}>
  <Component>
    <Suspense fallback={<Loader />}>
      <LazyLoadedComponentA />
    </Suspense>
  </Component>
  <Component>
    <Suspense fallback={<Loader />}>
      <LazyLoadedComponentB />
    </Suspense>
  </Component>
</Suspense>