Tracker reactivity compatibility boundary with React and Vue integration

Reactivity Ownership and Lifecycle

In modern framework integrations, the ownership of Tracker.autorun cleanup belongs to the component's unmount lifecycle. Because Tracker operates independently of the React or Vue virtual DOM, it will continue to execute and trigger state updates even after a component is destroyed unless explicitly stopped.

Cleanup Implementation

• React: The stop handle returned by Tracker.autorun must be called within the cleanup function of a useEffect hook.
• Vue: The stop handle should be invoked within the onUnmounted lifecycle hook.

// Example React Pattern
useEffect(() => {
  const stop = Tracker.autorun(() => {
    const data = Collection.find().fetch();
    setState(data);
  });
  return () => stop();
}, []);

Subscription Readiness and State Synchronization

To surface subscription readiness without creating duplicate observers, the recommended approach is to treat the subscription status as a piece of framework-level state, driven by a single Tracker boundary.

Rather than wrapping every component in a separate observer, use a reactive wrapper or custom hook that monitors Meteor.subscription().ready(). This allows the framework to render a loading state until the DDP synchronization is complete, ensuring that subsequent data fetches are performed against a populated local cache.

Compatibility Boundaries for Nested Updates

There is no documented, automatic compatibility boundary for deeply nested reactive updates under allow rules or general Tracker observations. Tracker relies on dependency tracking via getters. If a nested property is modified without changing the reference of the parent object or triggering a reactive variable, Tracker may not detect the change.

Confirmed Behavior:

• Top-level reference changes always trigger reactivity.
• Deep mutations in plain JavaScript objects are not automatically tracked by Tracker.
• To ensure nested updates trigger a refresh, you must use ReactiveDict, ReactiveVar, or explicitly trigger a re-run by updating a tracked dependency.

Verification Steps

1. Leak Test: Mount and unmount a component multiple times; verify in the console that the autorun callback ceases to execute.
2. DDP Audit: Use the browser Network tab to confirm that DDP stop messages are sent when the component managing the subscription unmounts.
3. Mutation Test: Update a deeply nested field in a document and verify if the UI refreshes; if it does not, the boundary requires a reference change or a ReactiveVar trigger.

Diagnostic Note: To refine the recommendation for nested updates, please specify if you are using minimongo collections or custom client-side state objects.