React context withTracker is awesome!

convexset · November 28, 2018, 8:43am

Just started using React in Meteor for a new app, and this thread was very useful.

I’ve modified things to reduce the amount of boilerplate I’d have to write, and this might be a useful addition to the conversation. (Or I might learn something about how I should be doing things).

Basically, I can write components that consume context like this (the context is added to props) and write providers concentrating on just getting the data its schema:

some-component.jsx

import React from 'react';
import PropTypes from 'prop-types';

import { InjectConnectionStatusContextInto, connectionStatusPropTypes } from '/imports/client/providers/connection-status-provider';

export class ConnectionStatusInfo extends React.Component {
	render() {
		const { connected, status, retryCount } = this.props.connectionStatus;
		return (
			<React.Fragment>
				<h3>Connection Information</h3>

				<p>Status: <code>{status}</code></p>

				<p>Connected: <code>{connected.toString()}</code></p>
			</React.Fragment>
		);
	}
}
ConnectionStatusInfo.propTypes = {
	connectionStatus: PropTypes.shape(connectionStatusPropTypes).isRequired,
};

export default InjectConnectionStatusContextInto(ConnectionStatusInfo);

The provider:

import PropTypes from 'prop-types';

import { Meteor } from 'meteor/meteor';

import createReactiveContext from './create-reactive-context';

export const connectionStatusPropTypes = {
	retryCount: PropTypes.number.isRequired,
	status: PropTypes.string.isRequired,
	connected: PropTypes.bool.isRequired,
};

const propTypes = {
	connectionStatus: PropTypes.shape(connectionStatusPropTypes).isRequired,
};

function getProps() {
	return {
		connectionStatus: Meteor.connection.status()
	};
}

export const {
	ConnectionStatusProvider, ConnectionStatusConsumer,
	ConnectionStatusContext, InjectConnectionStatusContextInto
} = createReactiveContext('ConnectionStatus', propTypes, getProps);

I’ve dumped all the boilerplate into a function createReactiveContext which is shown here:

import React from 'react';
import PropTypes from 'prop-types';
import _ from 'underscore';

import { withTracker } from 'meteor/react-meteor-data';

function injectContext(ContextConsumer, WrappedComponent, preferContext) {
	// context overwrites props if preferContext = true
	return props => {
		return (
			<ContextConsumer>
				{context => preferContext ? <WrappedComponent {...props} {...context}/> : <WrappedComponent {...context} {...props}/>}
			</ContextConsumer>
		);
	};
}

export default function createReactiveContext(contextName, propTypes, reactivePropFunction,
	{ preferContext = true, namedComponents = true } = {}
) {
	const Context = React.createContext(contextName);

	class ReactiveProvider extends React.Component {
		render() {
			return (
				<Context.Provider value={this.props}>
					{this.props.children}
				</Context.Provider>
			);
		}
	}

	ReactiveProvider.propTypes = {
		children: PropTypes.node.isRequired
	};
	_.extend(ReactiveProvider.propTypes, propTypes);

	const Provider = withTracker(reactivePropFunction)(ReactiveProvider);
	const Consumer = Context.Consumer;

	const InjectContextInto = Component => injectContext(Consumer, Component, preferContext);

	if (namedComponents) {
		return {
			[`${contextName}Provider`]: Provider,
			[`${contextName}Consumer`]: Consumer,
			[`${contextName}Context`]: Context,
			[`Inject${contextName}ContextInto`]: InjectContextInto,
		};
	} else {
		return { Provider, Consumer, Context, InjectContextInto };
	}
}

… that’s as currently written in my codebase.

Comments very much welcome. (Actually, comments sought… because I’m not sure if this is the best way.)

rhywden · November 28, 2018, 6:26pm

Last time I tried to use the React Context it did not play very well with React Router - the latter simply silently failed. Any click on a <Link /> changed the address bar but did not render the actual route. No errors anywhere.

Just an FYI for anyone scratching his head because of this.

storyteller · December 30, 2018, 9:50am

Just ran into this issue.
I think the issue is update blocking described in react-router guide:

github.com

ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md

# Dealing with Update Blocking

React Router has a number of location-aware components that use the current `location` object to determine what they render. By default, the current `location` is passed implicitly to components using React's context model. When the location changes, those components should re-render using the new `location` object from the context.

React provides two approaches to optimize the rendering performance of applications: the `shouldComponentUpdate` lifecycle method and the `PureComponent`. Both block the re-rendering of components unless the right conditions are met. Unfortunately, this means that React Router's location-aware components can become out of sync with the current location if their re-rendering was prevented.

### Example of the Problem

We start out with a component that prevents updates.

```js
class UpdateBlocker extends React.PureComponent {
  render() {
    return (
      <div>
        <NavLink to="/about">About</NavLink>
        <NavLink to="/faq">F.A.Q.</NavLink>
      </div>
    );
  }

This file has been truncated. show original

Simple solution for me was to add withRouter to the AccountProvider (using the OP example):

import { withRouter } from 'react-router-dom';

export const AccountProvider = withRouter(withAccount(Provider));

Emin · January 16, 2019, 2:51am

Hello there!

Such a useful and neat pattern you shared @captainn. Thanks for that!

I wonder if you have any caching solution pattern you use that you’d like to share? Or anyone??

At the moment, I’m fetching data from the DB every time I go to a certain page, with React Router, so that definitely requires some improvements and I’m thinking of dropping the router all together. What do you folks think?

captainn · January 16, 2019, 6:35am

I load data into a ground db instance over methods, usually on the container element for a route, in componentDidMount (then the reactive meteor source does its magic to reflow the data). You could also put a timeout on that, so that it would only re-request data after a certain amount of time has passed. You’d have to store that info somewhere, maybe in a separate offline collection, or redux or something. If you use redux or a memory only store, it would allow a refresh of the page to fetch new data.

dchafiz · February 22, 2021, 5:07am

@captainn Awesome concept there! Thank you for sharing the idea! I’ve tried to follow your example, but am facing a problem here. In need of a little help.

I have created a similar code with React context, but without the withTracker implementation. As you can see from the code below, the useEffect is triggered when it detects the current user login, and that’s it, no more updates after that. I think this code can benefit more if I can set it up using withTracker, so that whenever there’s a change on the current user collection, it feeds the latest info to the specific components that uses the HOC.

import React, { useContext, useState, useEffect } from 'react';
import { Meteor } from 'meteor/meteor';

import message from 'antd/es/message';

const CurrentUserProfileContext = React.createContext()

export function useCurrentUserProfile() {
    return useContext(CurrentUserProfileContext);
}

export function CurrentUserProfileProvider({children}) {
    const [currentUserData, setCurrentUserData] = useState();
    const [loggedIn, setLoggedIn] = useState(false);

    let userX = Meteor.userId()
    useEffect(() => {
        if(typeof userX == 'string'){
            setLoggedIn(true)
        } else {
            setLoggedIn(false)
        }
    })

    useEffect(() => {
        const loadData = () => {
            Meteor.call('getCurrentUser', function(err, result){
                if(err){
                    message.error('Error getting current user data');
                } else {
                    let userData = result[0];
                    setCurrentUserData(userData);
                }
            });
        }
        loadData();
    }, [loggedIn]);
    
    //useEffect(() => console.log(currentUserData), [currentUserData]);

    return (
        <CurrentUserProfileContext.Provider value={currentUserData}>
            {children}
        </CurrentUserProfileContext.Provider>
    )
}

How can I change this code to use withTracker to always receive latest info?

P/S: For clarity, I’ve created a different collection named UserProfiles to store more data about the user, and assign Meteor.userId to an owner key in each of the UserProfile document as linked identity between the default user collection and the UserProfiles collection.

hemalr87 · February 22, 2021, 6:00am

I suspect this is happening because your first useEffect is only firing on mount and not after that (no dependency array). This means that the second useEffect’s dependency is never changing, hence has no reason to rerun.

Try this:

import React, { useContext, useState, useEffect } from 'react';
import { Meteor } from 'meteor/meteor';

import message from 'antd/es/message';

const CurrentUserProfileContext = React.createContext();

export function useCurrentUserProfile() {
  const context = useContext(CurrentUserProfileContext);
	if (context === undefined) {
		throw new Error(
			`useCurrentUserProfile must be used within a CurrentUserProfileContext Provider`,
		);
	}
	return context;
}

export function CurrentUserProfileProvider({ children }) {
	const [currentUserData, setCurrentUserData] = useState();

	useEffect(() => {
		const loadData = () => {
			Meteor.call('getCurrentUser', function (err, result) {
				if (err) {
					message.error('Error getting current user data');
				} else {
					let userData = result[0];
					setCurrentUserData(userData);
				}
			});
		};
		loadData();
	}, [Meteor.userId()]);

	return (
		<CurrentUserProfileContext.Provider value={currentUserData}>
			{children}
		</CurrentUserProfileContext.Provider>
	);
}

dchafiz · February 22, 2021, 6:11am

@hemalr87 elegant!

But the collection that gets updated is not the user collection, but some other collection i.e. UserProfile… so, will the Meteor.userId() trigger a rerun, when some other collection is updated?

hemalr87 · February 22, 2021, 6:14am

Ah right.

No it will not. But by the sounds of it, this is something that is made for a subscription rather than a method - because for you to put in the logic to rerun the method call would require knowing that a change has happened, which the client doesn’t know until the method is called.

dchafiz · February 22, 2021, 6:25am

Yes, that’s something that I would like to achieve with witchTracker and to wrap that in a React context.
Will something like this work?

import React, { useContext, useState, useEffect } from 'react';
import { Meteor } from 'meteor/meteor';
import { UserProfiles } from '../../../api/userprofiles.js';
import message from 'antd/es/message';

const CurrentUserProfileContext = React.createContext();

export function useCurrentUserProfile() {
  const context = useContext(CurrentUserProfileContext);
	if (context === undefined) {
		throw new Error(
			`useCurrentUserProfile must be used within a CurrentUserProfileContext Provider`,
		);
	}
	return context;
}

const CurrentUserProfileProvider = (props, { children }) =>  {
	const [currentUserData, setCurrentUserData] = useState();

	useEffect(() => {
		const loadData = () => {
			Meteor.call('getCurrentUser', function (err, result) {
				if (err) {
					message.error('Error getting current user data');
				} else {
					let userData = result[0];
					setCurrentUserData(userData);
				}
			});
		};
		loadData();
	}, [props]);

	return (
		<CurrentUserProfileContext.Provider value={currentUserData}>
			{children}
		</CurrentUserProfileContext.Provider>
	);
}
export default withTracker(() => {
   const subscribeData = Meteor.subscribe('userprofile');
   const loading = !subscribeData.ready();
   const data = UserProfiles.find();
   const dataExist = !loading && !!data;

   //return data as props
   return {
       loading,
       dataExists,
       actualData: dataExists ? UserProfile.find({
            owner: Meteor.userId()
      }).fetch() : []
}
})(CurrentUserProfileProvider)

hemalr87 · February 22, 2021, 6:45am

That pattern should work in principle yes (minus the typo on dataExist). A few notes/questions:

If the ‘getCurrentUser’ method is fetching data from the same collection as the ‘userprofile’ subscription then that method call is not required at all since the tracker will pass through the data directly to the component (making the method call fetching the same data redundant).
If you wanted to keep the React hooks pattern going you could useTracker within the component itself vs the withTracker HOC (not that one is necessarily better than the other, just an option).
I would avoid using props as your dependency (if that useEffect and the method call inside it are needed at all). Since it isn’t a primitive, that useEffect will rerun every single render. You could either break it down into an array of dependencies or use something like this package.
The ternary for your actualData value isn’t necessary either as if data didn’t exist, an empty array would be returned by default.

dchafiz · February 22, 2021, 7:01am

@hemalr87 i’ve cleaned up the code to reflect your suggestions above:

import React, { useContext } from 'react';
import { Meteor } from 'meteor/meteor';
import { withTracker } from 'meteor/react-meteor-data';
import { UserProfiles } from '../imports/api/UserProfiles';

const CurrentUserProfileContext = React.createContext();

export function useCurrentUserProfile() {
  const context = useContext(CurrentUserProfileContext);
	if (context === undefined) {
		throw new Error(
			`useCurrentUserProfile must be used within a CurrentUserProfileContext Provider`,
		);
	}
	return context;
}

function CurrentUserProfileProvider(props, { children }){

	return (
		<CurrentUserProfileContext.Provider value={props.actualData}>
			{children}
		</CurrentUserProfileContext.Provider>
	);
}
export default withTracker(() => {
   const subscribeData = Meteor.subscribe('userprofile');
   const loading = !subscribeData.ready();
   const data = UserProfiles.find();
   const dataExist = !loading && !!data;

   //return data as props
   return {
       loading,
       dataExist,
       actualData: UserProfile.find({
            owner: Meteor.userId()
      }).fetch()
}
})(CurrentUserProfileProvider);

… but am getting an error on the console:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

dchafiz · February 22, 2021, 1:12pm

I got it working, for now. Sharing the code for the benefit of others. Not saying this is a clean code, but just want to share the idea:

import React, { useContext, useState, useEffect } from 'react';
import { Meteor } from 'meteor/meteor';
import { withTracker } from 'meteor/react-meteor-data';
import { UserProfiles } from '../imports/api/UserProfiles';

const CurrentUserProfileContext = React.createContext();

export function useCurrentUserProfile() {
    return useContext(CurrentUserProfileContext);
}

const CurrentUserProfileProvider = (props,{ children }) => {
    const [currentUser, setCurrentUser] = useState();
    
    useEffect(() => {
        const getData = () => {
            if (props != undefined){
                setCurrentUser(props.actualData[0])
            }
        }
        getData()
    }),[props]
    
	return (
		<CurrentUserProfileContext.Provider value={currentUser}>
			{props.children}
		</CurrentUserProfileContext.Provider>
	);
}
export default withTracker(() => {
   const subscribeData = Meteor.subscribe('currentUserProfile');
   const loading = !subscribeData.ready();
   const data = UserProfiles.find();
   const dataExist = !loading && !!data;

   //return data as props
   return {
       loading,
       dataExist,
       actualData: UserProfiles.find({
            owner: Meteor.userId()
      }).fetch()
}
})(CurrentUserProfileProvider);

captainn · February 22, 2021, 5:18pm

You could put your subscription and data fetching from withTracker in useTracker in your CurrentUserProfileProvider, replacing useEffect and useState there, and then feed that data through the Context API to greatly simplify your work here.

hemalr87 · February 24, 2021, 11:39am

Nice, glad you got it working