Best way to organize functions in React?

Hello everyone!

Question: What would be the best way to setup my functions associated to e.g. Mongodb Collection Objects? Are there Best Practices in React, Meteor?

I used to use the package Collection Helpers in blaze, where I could call Mongodb queries insight the method and everything was reactive.

Using this, in autorun, Messages AND Streams was both reactive.

Now in react, I have:

Bildschirmfoto 2024-02-12 um 15.30.15

I keep reactivity through the dep Array, but I could not use helper code like shopCart.getStream() as a inner Query to Collections.Streams.findOne(shopCart.stream_id) would not be reactive.

I found the Collection Helpers package really cool, because I could use code on both client and server side.

Do you know some cool patterns?

Thanks in advance :smiley:

Can you get the results of shopCart.getStream() and assign the results to a React component useState variable? That would make the React component reactive. (I haven’t used MongoDB except for Meteor Accounts.)

I have been lately struggling with React and reactivity. The big change/return now is to have components dedicated just to data fetching while previously it used to be in one component or we have HOCs (which are now making comeback). Since my project is almost 10 years old it is a mix, but lately while experimenting with React 19, the older pattern with co-located data fetching has been causing a lot of problems. In React 18 I could get around it with suspense, but that seems no longer be possible, so now I’m hunting for the problem code and separating things. The upside of this is that it will make it easier to use the show components in Storybooks and other tools outside of Meteor.

Though I think we need a guide on the proper React pattern with Meteor. Anyone has any good suggestions here?

I’ve tried working with React Router’s data fetching, and it isn’t compatible with having “unknown” components on the router level.

With use() and suspense, I am planning to make stand-alone components that have the following structure:

Suspense Boundary > data fetching > UI

Data fetching can be either a subscription or a method.

For our use, the component should be the same for both client and SSR (I haven’t thought yet how this will work with RSC).

I still do not know if this will work with React 18 and Meteor 3. We also have a mix of hooks and classes