Inherent problems due to the use of useEffect to "load" the external component

[doflo-dfa]

by using useEffect (internally) to manage the state changes on the loading of the component it causes a number of problems if you do anything stateful down-stream, basically causing most scenarios to violate the rules of hooks.

As an example useContext will not work in any of the remotely loaded controls due to this, it should at least be in the caveates.

Or hopefully I am just dumb and missed something.

😄

[joelnet]

Do you have a repo where these effects can be observed? So far we haven't seen any issues with using useEffect within the component.

[wittjosiah]

@joelnet I can confirm that recently I observed the situation @doflo-dfa described. Within the remote component I was unable to access a context that the component was within. It's not entirely clear to me what causes this issue and I'd love to understand it why that was happening. I was able to work around it by passing info into the remote component as props and creating another context provider within the remote component which worked as expected. If I have some time soon, I can try to make a minimal reproduction of it, if that would be helpful.

[doflo-dfa]

Sorry for the late reply on this, we have done a lot of digging on this and it was almost certainly caused by bundled ( mis matched or not) copies of react ... once we had webpack correctly set up to use resolve, solved some tree shaking issues and had isolated our other dependancies to ensure they were also following the rules it seems to have solve most of our issues using useEffect, useState, useRef etc

The other thing that was a real PITA was how webpack was treating tsx files for compilation, as default exports they were not originally in the loader format that remote-component-loader was expecting.

[wittjosiah]

I finally had a minute to make a reproduction of the issue I was seeing along the lines of what you mentioned @doflo-dfa. I've pushed that up here: https://github.com/wittjosiah/remote-component-example. Is this something that you've solved with your webpack setup?

@joelnet if you take a look at that repo you should be able to observe these effects. Interestingly I tried a similar thing with useState and it seemed to work fine, but useContext not so much.

[patryksliwinski]

I also have an issue that remote component never resolve main app context, anyone was able to resolve that?

[wittjosiah]

It was a while ago so I can't remember specifically, but I don't think I ever got contexts to work. IIRC what I ended up doing was passing things through as props and recreating the context inside the remote component and that seemed to work good enough as a workaround.