How to use Meteor with React hooks

What is that?

react-meteor-data package provides integration between React and Tracker, Meteor's reactive data system. It's a simple way and a must-have package if you're building software with Meteor + React.

Installation

if you created your app using meteor create ... you already have that installed by default, so you can skip this step.

To install the package, use meteor add:

meteor add react-meteor-data

You’ll also need to install react if you have not already:

meteor npm install react

What is new?

Just a brief explanation about useTracker to refresh your mind:

You can use the useTracker hook to get the value of a Tracker reactive function in your React "function components." The reactive function will get re-run whenever its reactive inputs change, and the component will re-render with the new value.

It’s basically the way you fetch data from the server and keep it updated whenever something changes.

We have 2 new hooks on the package, they were added on v2.4.0, 2021–12–02.

They were created to be close as possible to React’s concepts and to be easier to maintain.

useSubscribe → A convenient wrapper for subscriptions.

useSubscribe is a convenient shorthand for setting up a subscription. It is particularly useful when working with useFind, which should NOT be used for setting up subscriptions. At its core, it is a very simple wrapper around useTracker (with no deps) to create the subscription in a safe way, and allows you to avoid some of the ceremonies around defining a factory and defining deps. Just pass the name of your subscription and your arguments.

useFind → Accelerate your lists

The useFind hook can substantially speed up the rendering (and rerendering) of lists coming from mongo queries (subscriptions). It does this by controlling document object references. By providing highly tailored cursor management within the hook, using the Cursor.observe API, useFind carefully updates only the object references changed during a DDP update. This approach allows a tighter use of core React tools and philosophies to turbo charge your list renders. It is a very different approach from the more general-purpose useTracker, and it requires a bit more setup. A notable difference is that you should NOT call .fetch(). useFind requires its factory to return a Mongo.Cursor object. You may also return null, if you want to conditionally set up the Cursor.

Example code with both of them working together:

// Note: isLoading is a function!
const isLoading = useSubscribe('posts', groupId);
const posts = useFind(() => Posts.find({ groupId }), [groupId]);if (isLoading()) {
  return <Loading />
} else {
  return <ul>
    {posts.map(post => <li key={post._id}>{post.title}</li>)}
  </ul>
}

TL;DR:

useFind is easier to use for higher performance scenarios than useTracker. It gets you a reference stable list of items from your find query, and you can use that to memoize the items in your rendered list. If you add a page of 10 items, to a list of 500, react will only have to render the new 10, the others will not rerender. If a single document updates, only that 1 item will need to rerender. The reconciler will be able to skip the rest, because of the reference stability.

useSubscription is currently just a thin wrapper around useTracker so it's easy to set up subscriptions without the boilerplate of useTracker

Big thanks to CaptainN for maintaining the package and StorytellerCZ and William Kelley for contributing in the past months.

Reference: https://github.com/meteor/react-packages/tree/master/packages/react-meteor-data