KeepAlive not working with React Portals - React 18

CJY0208 / react-activation

Hack <KeepAlive /> for React

https://www.npmjs.com/package/react-activation

MIT License

1.81k stars 141 forks source link

Open FreddyMartinez opened 1 year ago

FreddyMartinez commented 1 year ago

Hi! nice library, but I'd like to ask for help solving an issue with React 18 and createPortal.

When using KeepAlive inside portals, the component wrapped by KeepAlive is frozen, ie it is rendered but it is not possible to interact with it.

I've made a PoC in this sandbox. This problem only happens using React 18, the same code using React 16 works fine (here a sandbox).

I appreciate any help you can provide on this. Greetings.

isc30 commented 1 year ago

For reference, this works on React16 but doesn't on React17/18:

const Portal = createPortal(children, target)

const usage =
  <AliveScope>
    <Portal>
      <Counter />
    </Portal>
  </AliveScope>