As we discovered within the earlier a part of this collection, why and the way we might use Suspense. This text will talk about and present the best way to use Meteor’s newly added suspendable hooks.
With the modifications coming to Meteor, particularly with its fibers-free future, we determined so as to add to our hooks assortment react-meteor-data just a few hooks that may cope with these new async strategies.
For starters, we have to handle that useFind nonetheless works because it all the time did on the consumer; it was carried out utilizing synchronous capabilities, so it was secure from change. However vital to notice that if you’re utilizing the useFind hook on the server, for instance, whereas utilizing SSR, you will want to make use of the newly added suspense/useFind hook. That is vital as a result of now you can’t do a sync database search with the present implementation of useFind within the server, however with the newly added Suspense model, you’ll be able to.
Earlier than displaying examples, we wish to present one other made-suspendable hook: useSubscribe now. As an alternative of utilizing an isLoading perform to know when the subscription is prepared, we made it use the Suspense API. Let us take a look at the way it was earlier than and the way will probably be:
// earlier than
// Duties.jsx
perform Duties(){
const [hideDone, setHideDone] = useState(false);
const isLoading = useSubscribe("duties");
const filter = hideDone ? { finished: { $ne: true } } : { };
const duties = useFind(
() => TasksCollection.discover(filter, { kind: { createdAt: -1 } }),
[hideDone]);if (isLoading()) return <Loader />
// render the duties
}
// With suspense
// Duties.jsx (have a Suspense wrapper outdoors with fallback={ <Loader /> }
perform Duties(){
const [hideDone, setHideDone] = useState(false);
useSubscribe("duties");
const filter = hideDone ? { finished: { $ne: true } } : { };
const duties = useFind(
TasksCollection,
[filter, { sort: { createdAt: -1 } }],
[hideDone]
);
// render the duties
}
It seems and feels nearly the identical. We simply moved the isLoading to the skin, and now we’ve got a way more declarative code with a greater Developer expertise.
The modifications relating to the useFind are the way you construct your perform. Now you must go the Assortment, the arguments, and its dependencies.
On this half, there might be a change to droop when async. This is because of how Suspense works below the hood(a easy rationalization: we want a method to monitor the guarantees when they’re thrown, for an extended model, examine the earlier article from this collection ). One of many issues we might want to add one key to every useTracker occasion.
// earlier than
// Duties.jsx
perform Duties(){
const isLoading = useSubscribe("duties");
const { username } = useTracker(() => Meteor.consumer())
const tasksByUser = useTracker(() =>
TasksCollection.discover({username}, { kind: { createdAt: -1 } }).fetch()
);
if (isLoading()) return <Loader />
// render the duties
}
// With suspense
// Duties.jsx (have a Suspense wrapper outdoors with fallback={ <Loader /> }
perform Duties(){
useSubscribe("duties");
const { username } = useTracker("consumer",() => Meteor.consumer()) // Meteor.consumer() is now async
const tasksByUser = useTracker("tasksByUser", () =>
TasksCollection.discover({username}, { kind: { createdAt: -1 } }).fetchAsync() // fetch might be async
);
// render the duties
}
It appears extra bloated as a result of addition of strings, however now we don’t want to consider loading states, and for a few of them, the brand new react rendering engine improves our efficiency, and the reactivity is maintained between renders.
If, in your case, you solely used useFind as earlier than, with out SSR and with out utilizing useTracker with async dependencies, equivalent to calling a fetch from a group, then chances are you’ll not must replace as these modifications are simply new API areas for fixing the newly added functionalities that have been added in Meteor 3.
