Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Changing one document causes re-render of all components #109

Closed
nadeemja opened this issue Jul 27, 2016 · 4 comments
Closed

Changing one document causes re-render of all components #109

nadeemja opened this issue Jul 27, 2016 · 4 comments

Comments

@nadeemja
Copy link

Hello,

I would really appreciate some help on this.

The Problem
A change in document causes components displaying other documents to re-render as well.

Expected behavior
Only the component displaying the affected document should re-render.

Steps to recreate

  1. Setup pub/sub and container/components as below.
  2. Change anything about a document.
  3. Use React DevTools for Chrome to confirm re-render. (confirmed using console.log)

The Setup

Publication
server/publications/schedules.js

...
Meteor.publish('schedules.list', function schedulesList() {
  ...
  return Schedules.find();
});
...

Container
client/modules/schedules/containers/list.js

import { useDeps, composeAll, composeWithTracker, compose } from 'mantra-core';
import List from '../components/list.jsx';

export const composer = ({ context }, onData) => {
  const { Meteor, Collections } = context();
  if (Meteor.subscribe('schedules.list').ready()) {
    const schedules = Collections.Schedules.find().fetch();
    onData(null, { schedules });
  }
};

export const depsMapper = (context, actions) => ({
  context: () => context,
});

export default composeAll(
  composeWithTracker(composer),
  useDeps(depsMapper)
)(List);

List Component
client/modules/schedules/components/list.jsx

import React from 'react';
import Item from './item.jsx';
const List = ({ schedules = [] } = {}) => (
  <div>
    {schedules.map((schedule) => (
      <Item schedule={schedule} key={schedule._id} />
    ))}
  </div>
);

export default List;

Item Component
client/modules/schedules/components/item.jsx

import React from 'react';
import {
 ...
} from 'react-bootstrap';

const Item = ({ schedule = {} }) => (
  <div>
    ...
  </div>
);

export default Item;
@crapthings
Copy link

i've the same issue

@arunoda
Copy link
Owner

arunoda commented Sep 27, 2016

Yep. This will be fixed in 2.x - #123

@nadeemja
Copy link
Author

Awesome, @arunoda! :)

@arunoda
Copy link
Owner

arunoda commented Nov 8, 2016

Launched v2. Check the Performance section.

@arunoda arunoda closed this as completed Nov 8, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants