0
Const A = lazy(() => import(“compA”))


render() {
    <Suspense fallback={<B/>}
          <A>
             <B />
          </A>
    </Suspense>

}

I want B to be loaded while A is resolving. But fallback unmounts B and is mounted again when A resolves.

I've tried useRef and useMemo hooks for component B, but that still does not resolve the issue. How can I achieve not remounting the component B when A resolves in above scenario?

macro
  • 31
  • 1
  • 1
  • 4

1 Answers1

1

It is impossible. This is how react works. If it encounters new component while diffing, it will unmount the old node and all its children and will mount the new node.

  • Your old VDOM is: <B />
  • New VDOM is: <A><B /></A>

This is what it does:

  1. The old one was B, the new one is A
  2. it compares them. They are not same
  3. Unmounts B (and all its children if exist)
  4. Mounts A
  5. Then mounts its children (B)

What you can do is to move the visual part of the B component and use it as the fallback, so the re-mounting wont cause any issues

Oktay Yuzcan
  • 2,097
  • 1
  • 6
  • 15