SolidJS•5mo ago

Wait on (async) onMount from Parent before running (sync) onMount from Children?

Hey! Let's assume you have a component that functions as a global store provider to all children. It sits atop all components. Like so:

<StoreContext.Provider value={globalStore}>
  {props.children}
</StoreContext.Provider>

<StoreContext.Provider value={globalStore}>
  {props.children}
</StoreContext.Provider>

This store provider has some onMount() that runs asynchronously. Another component, which is a child of our StoreProvider component, also has some onMount(), but its not (!) async. Then, unfortunately, the order will commence like so:

StoreProdiver - onMount start
SomeChild     - onMount start & finish
StoreProvider - onMount finish

StoreProdiver - onMount start
SomeChild     - onMount start & finish
StoreProvider - onMount finish

How can we ensure that the order runs like so:

StoreProdiver - onMount start
StoreProvider - onMount finish
SomeChild     - onMount start & finish

StoreProdiver - onMount start
StoreProvider - onMount finish
SomeChild     - onMount start & finish

Thank you!

2 Replies

REEEEE•5mo ago

Add a signal to the store provider that gets set to true when the async operation is done, change the child's onMount to an effect that listens to that signal and runs when the signal is true

js_rsOP•5mo ago

Ty, already figured out in a different way, but similar.

Gaming

Programming

Wait on (async) onMount from Parent before running (sync) onMount from Children?