React 19 & Meteor

react
1

So React 19 is in BETA. There are quiet a few new impressive hooks and features.
I think the Meteor’s React hooks can be updated to take advantage of these new features and in our apps there are new opportunities.

Looking through the documentation these are what I see should really connect well with Meteor:
useOptimistic - maybe connected with Meteor.call?
use - I’m thinking this might be useful around accounts for conditional loading, but not sure yet
preconnect and similar in relation with the incorporation of <title> and headers into React itself could be use to help load things a little bit faster. Should be something that sets up all the pre-connects and other to connect to the app server.

Right now my Meteor app with React 19 is not working, but that is probably due to bad loading in the app then anything else (working on fixing this now), but I’m interested what you all thing about this and potentially if you have some nice examples of using this new API or even older like transitions.

2

Should be helpful with Suspense and Lazy (and ideally code splitting). This should also help in async data query in SSR: SSR with Meteor.callAsync - #24 by rjdavid

1 Like
3

Looking at the issues with my app, useSubscribe and useTracker caused me an insane amount of reloading when used in a context provider, to a point that the client became unusable.

What are your thoughts/practices with using useUser/useUserId? Are you using them where needed in components or using context to pass user information down to components?

4

Using context as well.

You can check with your provider what is causing the value to change (I assume multiple times).

5

It was an issue with suspense useSubscribe and useTracker, once I build my own useEffect to handle these the issue went away (though a lot of trial and error). React did not handle the reactive sources well. I will have to dive more deeply into all that stuff. Would be nice to create some pattern and recommendations that could be re-used for contexts and other options, especially with the new React 19. I have only a very basic understanding of this in React, so I want to look more into it as I want to see what advantage we can take for React.

Does anyone have any specific patterns for Meteor + React? Please share! Let’s expand the React chapter in the Meteor Guide!

2 Likes
6

Related (?):

1 Like
7

It’s working fine now @storyteller.

I haven’t tested it in a large project yet, but the basic setup is working. Check out the “Memo :sparkles:” in React DevTools:

image
image3900×1236 184 KB

See it live here:
https://meteor-template-quave.svc-us5.zcloud.ws/

Commit:

2 Likes