Meteor / React App - Very Slow with Lots of Data - performance

Question

I built an application and it was fast and cool until I added a bunch of data to test it. I started with Contacts collection only and added 28,000 records. Now my Contacts Page takes at least 30 to 60 seconds to load and sometimes even crashes the browser.
I understand that 28,000 records is not that much, plus I can load other data that is related to Contacts, like Charges that can be approximately 80,000 of records based on my logic where each Contact can have 2-3 records of Charges. So loading the page with Contacts and Charges only (there might be more other data), would need to get approximately 110,000 records be loaded until I let to render a page. Here is the code example (similar but my page is much more complicated):
import React, { PropTypes } from "react";
import { createContainer } from "meteor/react-meteor-data";
import { Contacts } from '../api/contacts.js';
import { Charges } from '../api/charges.js';
class SingleContactRow extends React.Component {
renderCharges() {
const {contact, charges} = this.props;
let contactCharges = [];
charges.forEach(function(charge) {
if (charge.contactId === contact._id) {
contactCharges.push(charge);
}
});
return contactCharges.map((charge, i) => (
<div key={charge._id}>
Charge #{i}: {charge.name} _ ${charge.amount}
</div>
));
}
render() {
const {contact} = this.props;
return (
<div><b>{contact.name}</b></div>
<div>{this.renderCharges()}</div>
);
}
}
class ContactsComponent extends React.Component {
renderContacts() {
const {contacts, charges} = this.props;
return contacts.map((contact) => (
<SingleContactRow key={appointment._id} contact={contact} charges={charges} />
));
}
render() {
const {loadingContacts, loadingCharges} = this.props;
if (!loadingContacts && !loadingCharges) {
return(
<div>
{this.renderContacts()}
</div>
);
} else {
return(
<div>Loading ... </div>
);
}
}
}
ContactsComponent.propTypes = {
contacts: PropTypes.array.isRequired,
charges: PropTypes.array.isRequired,
};
export default createContainer(({ params }) => {
const contactsHandle = Meteor.subscribe('contacts');
const loadingContacts = !contactsHandle.ready();
const chargesHandle = Meteor.subscribe('charges');
const loadingCharges = !chargesHandle.ready();
return {
loadingContacts,
contacts: Contacts.find({}, { sort : { createdAt : -1 } }).fetch(),
loadingCharges,
charges: Charges.find({}).fetch(),
};
}, ContactsComponent);
What I do above:
I subscribe to data
I wait until all of the data gets loaded, and in the meanwhile render to a user "Loading ..." message
Then I render Contacts
Then loop through all of the Charges and push into an Array the charges that belong to that particular Contact (I see problem in here)
Return Charges for each Contact
If I had 30,000 records of Contacts and 90,000 records of Charges this page would take at least a minute or two to render. How to improve this situation?