search

facebook / react

The library for web and native user interfaces.
https://react.dev
MIT License
227.34k stars 46.37k forks source link

Bug: possible bug in createPortal - invalid hook calls in micro frontends setup #27708

Open sznowicki opened 10 months ago

sznowicki commented 10 months ago

React version: 18.2.0

Steps To Reproduce

We observe a behaviour that we're not sure if we pushed our architecture little too much or it's an actual bug. Any comments appreciated.

The setup is that we have a micro frontend architecture website. Host application is running a react server side rendering with hydration. Some parts of the website are snippets of html taken elsewhere with their own JS that create a custom web component with shadow dom (open).

Those web components render their own parts in their own react runtime.

All works well until we had an idea to provide micro frontends an API to pass a react components to the host. Those components are later used as a Modal body (also when requested by the micro frontends).

This way we can maintain a single Modal component and switch bodies from any micro frontends in an arbitrary way.

It works fine except no hooks are possible. Once the passed react component uses any hook like useState React throws exception and stops running.

It makes sense of course so we tried different ways of fixing it, one would be to use createPortal which sounds like a solid candidate to separate those two React runtimes from each other. This issue is still there though.

tl;dr (also for future google searches):

  1. Two react instances in a single micro frontend.
  2. One instance accepts a component from a different instance.
  3. Fails when rendering that component dur to invalid hook calls.
  4. createPortal doesn't help.

No matter if it's a designed behaviour or something we do wrong, or an actual bug I'd highly appreciate any comments so we have some better insights what we do wrong.

Repro repo: https://github.com/sznowicki/repro-invalid-hooks-micro-frontend

The current behavior

createPortal can't render Component if it's rendered in a runtime of different React instance

The expected behavior

createPortal isolates react instances ensuring hooks are running in a context that createPortal was called

sznowicki commented 7 months ago

Bumping the issue.

github-actions[bot] commented 4 months ago

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

sznowicki commented 4 months ago

bump

github-actions[bot] commented 1 month ago

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

ktulufrozen commented 1 month ago

bump