Recommendations on handling React Provider and/or shared logic/data?

[marcellino-ornelas]

Description

Im using react on my extension and one common thing react does is configure providers (Eg. react query, react router, or etc) or wrap common logic in a component. So my question is what is your recommendation on handling these providers for different features or sharing this logic/data?

Lets say my extension is displaying two features on a webpage in different areas, that means I need to use 2 createIntegratedUi or equivalent, so i can target different locations on the page.

However this introduces a couple of problems of, If each createIntegratedUi has to render react, that means both need to configure providers for them to work. Which means they cant share the same providers and have to do work twice. Like say each one needs to know about the users auth status, both features would need to do this instead of sharing the same memory/data.

But if you put them into the same createIntegratedUi, then how do you target different elements?

---

Right now Im just using createIntegratedUi multiple times and not sharing data between different features but I use MUI for components and styles and one thing that keeps popping up is this warning:

Which makes me think we need to use one createIntegratedUi but just not sure how targeting different elements would work 🤔