So I have 3 components that are supposed to render inside a holder component. The 3rd component relies on the work done in the 2nd component, and the 2nd component relies on the work done in the 1st component. They both asynchronously read and write from a firebase firestore database, which obviously presents a problem. I'm getting issues because the 2nd component tries to access something from the database which doesn't exist yet, because the first component adds it.
This is how I have the components set up:
<React.Fragment>
<div className="flex">
<GroupPreferences />
<SetupDatabase gId={groupID} />
<Restaurants gId={groupID} user={user} history={history} />
</div>
</React.Fragment>
The work done on the components relies on hooks, where the first component uses UseEffect() and the other two use ComponentDidMount(). I need to somehow wait for all the database work in GroupPreferences to finish before SetupDatabase begins rendering.
You should pass callback functions to each child component, when logic inside will be done, they should trigger that callback, so you will know that the child component is done.
If you just need to understand if components have been rendered, you can use React.ref. if Ref.current have value, components are on the screen, if ref.current doesn't have value, it's haven't rendered yet