react-meteor-data package deal offers integration between React and Tracker, Meteor’s reactive information system. It is a easy approach and vital package deal for those who’re constructing software program with Meteor + React.
for those who created your app utilizing meteor create ... you have already got that put in by default, so you may skip this step.
To put in the package deal, use meteor add:
meteor add react-meteor-data
You’ll additionally want to put in react in case you have not already:
meteor npm set up react
Only a transient clarification about useTracker to refresh your thoughts:
You should use the useTracker hook to get the worth of a Tracker reactive perform in your React “perform elements.” The reactive perform will get re-run every time its reactive inputs change, and the element will re-render with the brand new worth.
It’s principally the way in which you fetch information from the server and preserve it up to date every time one thing modifications.
We’ve got 2 new hooks on the package deal, they had been added on v2.4.0, 2021–12–02.
They had been created to be shut as attainable to React’s ideas and to be simpler to keep up.
useSubscribe → A handy wrapper for subscriptions.
useSubscribe is a handy shorthand for establishing a subscription. It’s notably helpful when working with useFind, which ought to NOT be used for establishing subscriptions. At its core, it’s a quite simple wrapper round useTracker (with no deps) to create the subscription in a secure approach, and lets you keep away from among the ceremonies round defining a manufacturing facility and defining deps. Simply move the identify of your subscription and your arguments.
useFind → Speed up your lists
The useFind hook can considerably pace up the rendering (and rerendering) of lists coming from mongo queries (subscriptions). It does this by controlling doc object references. By offering extremely tailor-made cursor administration throughout the hook, utilizing the Cursor.observe API, useFind rigorously updates solely the article references modified throughout a DDP replace. This method permits a tighter use of core React instruments and philosophies to turbo cost your record renders. It’s a very totally different method from the extra general-purpose useTracker, and it requires a bit extra setup. A notable distinction is that you must NOT name .fetch(). useFind requires its manufacturing facility to return a Mongo.Cursor object. You might also return null, if you wish to conditionally arrange the Cursor.
Instance code with each of them working collectively:
// Word: isLoading is a perform!
const isLoading = useSubscribe('posts', groupId);
const posts = useFind(() => Posts.discover({ groupId }), [groupId]);if (isLoading()) {
return <Loading />
} else {
return <ul>
{posts.map(submit => <li key={submit._id}>{submit.title}</li>)}
</ul>
}
TL;DR:
useFind is less complicated to make use of for larger efficiency eventualities than useTracker. It will get you a reference steady record of things out of your discover question, and you need to use that to memoize the objects in your rendered record. For those who add a web page of 10 objects, to a listing of 500, react will solely must render the brand new 10, the others is not going to rerender. If a single doc updates, solely that 1 merchandise might want to rerender. The reconciler will be capable to skip the remainder, due to the reference stability.
useSubscription is at the moment only a skinny wrapper round useTracker so it is easy to arrange subscriptions with out the boilerplate of useTracker
Huge due to CaptainN for sustaining the package deal and StorytellerCZ and William Kelley for contributing up to now months.
Reference: https://github.com/meteor/react-packages/tree/grasp/packages/react-meteor-data
