Re-render react application from another react application

Question

I have two react applications, i.e. appA and appB(Both have thier own ReactDOM.render() method) and they generate different build files i.e. bundleA.js and bundleB.js respectively. These bundles are loaded in a third application i.e. container(a plain js app).

There are some common states shared between them using global/window variables. For instance,

window.pets = [
   {name: 'dog'},
   {name: 'cat'}
]

Let's say appA add/remove a pet to/from window.pets. It's updated in appA but not in appB. I tried using useEffect in both applications, as follow:

//object dependecy dependency
useEffect(()=>{
   console.log(window.pets);
},[window.pets])

//Also tried stringyting object
useEffect(()=>{
   console.log(window.pets);
},[JSON.stringify(window.pets)])

But it's not capturing the global state change in other application. Any suggestion will be helpful.

Maybe this package can help you npmjs.com/package/pubsub-js. Just emit and subscribe events inside your useEffect (don't forget unsubscribe) — Oro
– Oro, Commented Jun 19, 2021 at 15:17

programmerRaj · Accepted Answer · 2021-06-19 17:57:55Z

3

The useEffect hook only gets called every time the component re-renders. You need to make sure that your component gets re-rendered when window.pets changes. Like @Raman Nikitsenka commented, you can use some sort of event emitter to re-render your component when window.pets changes.

These are the key things you have to do:

Create a common event emitter
useEffect to subscribe and unsubscribe to events using .on() and .off().
Somehow re-render the component when external state changes. I use setState() with Symbol()s.

This is a link to the full example: https://codesandbox.io/s/react-global-state-ctp6d

answered Jun 19, 2021 at 17:57

programmerRaj

2,1783 gold badges12 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pramod Mali Over a year ago

Thanks for the solution. I had little different use-case where bundles were loaded on different pages. A variation of this worked for me!

Collectives™ on Stack Overflow

Re-render react application from another react application

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related