Understanding withtracker() component in Meteor

I was trying to learn meteor and not very familiar with this pattern of HOC (it's meteor.js with react).

I was going though their offical docs of tutorials. Here is what they did (You can click here to visit the page)

They imported following package in App.js

import React, { Component } from 'react';
import { withTracker } from 'meteor/react-meteor-data'; 
import { Tasks } from '../api/tasks.js';

Then there is a simple to do class App extends component wrapped by this HOC

export default withTracker(() => {
  return {
    tasks: Tasks.find({}).fetch(),
  };
})(App);

The official docs for the same says

The wrapped App component fetches tasks from the Tasks collection and supplies them to the underlying App component it wraps as the tasks prop. It does this in a reactive way, so that when the contents of the database change, the App re-renders, as we'll soon see!

Now this language isn't exactly alien to me but I am having hard to comprehend and understand it. So Can someone explain me the same?

To be specific what is The wrapped App component fetches tasks and supplies it to underline app component

Solution

A higher order component is in the most basic form a function that takes a component type as input and returns a component class that wraps the input component and adds functionality to it.

Usually the signature is function that takes the argument to apply to the wrapped component which returns a HOC as described above so you can use it with multiple components.

Here is a very basic example that shows an error message if the component it's used on or any of it's child components throw an exception:

const catchError = ({ errorMessage }) => InputComponent => class extends Component {
  render() {
       try {
        return <InputComponent {...this.props} />;
       } catch {
          return <div>{errorMessage}</div>
       }
  }
}

const ComponentWithErrorMessage = catchError({ errorMessage: 'Whoops!' })(MyComponent);

// This is the same as the following, the first just immediately invokes the returned function
const whoopsErrorHoc = catchError({ errorMessage: 'Whoops!' });
const ComponentWithWhoopsError = whoopsErrorHoc(MyComponent);

The meteor HOC will be a bit more complicated but the idea is the same. It receives a reference to the meteor Task store and will return a component that re-renders the input component whenever the data changes in the store and add the data to the props of that component.