Correct use of Tracker in react native component?

help
3

A cleaner variant is now allowed by using Hooks and functional components, thus allowing you to delete those frankly annoying HOC component wrappers.

You define this function once:

import { Tracker } from 'meteor/tracker';
import { useState, useEffect, useCallback } from 'react';

export default function withTracker(reactiveFn, dependencies) {
    const [trackerData, setTrackerData] = useState(null);
    const callback = useCallback(reactiveFn, dependencies);

    useEffect(() => {
        let computation;
        Tracker.nonreactive(() => {
        computation = Tracker.autorun(() => setTrackerData(callback()));
        });
        return () => computation.stop();
    }, [callback]);

    return trackerData;
}

And then use it in your component like this:

import React, { useState } from 'react';
import withTracker from './withTracker';

function Home(props) {

  const [otherStateValue, setOtherStateValue] = useState('foo');
  
  const loggedIn = withTracker(() => !!Meteor.userId());
  const phoneNumbers = withTracker(props => {
    Meteor.subscribe('phonenumbers.by_user_id', props.userId);
    return PhoneNumbers.find({}).fetch();
  }, [props.userId]);
  return <div>
             {loggedIn ? {dosomethingwith(phoneNumbers) : 'NotLoggedIn!'}
         </div>;
}

Taken from here: React Hooks - state and lifecycle methods without a class (React 16.7.0-alpha)