Is this the intended behavior for {pure: false}?

Hi guys. I’m using react-komposer with composeWithTracker and receiving fewer renders from my composer function than I would expect. Setting {pure: false} fixes the issue, only I don’t understand why because the props being sent to render are obviously not shallowly equal and should trigger a re-render each time, even without {pure: false}. I’m wondering if this is the intended behavior. Here’s some code:

import React from 'react';
import { composeWithTracker } from 'react-komposer';
import DataError from './DataError.js';
import Loading from './Loading.js';

const Composer = (props, onData) => {
  const status = Meteor.status();
  onData(null, status);
}

// a quick autorun for illustration to compare against the render below
Tracker.autorun(() => {
  const status = Meteor.status();
  console.log('autorun:', status);
});

const WebApp = (props) => {
  console.log('rendered:', props.status);
  return <div></div>;
};

export default composeWithTracker(Composer, Loading, DataError)(WebApp);

The above produces from the console:

autorun: Object {status: "connected", connected: true, retryCount: 0}
rendered: Object {status: "connected", connected: true, retryCount: 0}

> Meteor.disconnect();
autorun: Object {status: "offline", connected: false, retryCount: 0}
rendered: Object {status: "offline", connected: false, retryCount: 0}

> Meteor.reconnect();
autorun: Object {status: "connecting", connected: false, retryCount: 0}
autorun: Object {status: "connected", connected: true, retryCount: 0}
// no re-render here on 'status: connecting'
// no re-render here on 'status: connected'

If I set { pure: false } with composeWithTracker(Composer, Loading, DataError, {pure: false})(WebApp) I receive the missing re-renders, but I don’t understand why they are not occurring otherwise. The objects sent to props do not pass a shallow compare when {status: 'offline'} moves to {status: 'connecting'} etc. Am I missing something here?

[arunoda]

@sahanDissanayake This is not related.

[arunoda]

Hi guys, sorry for the delay. This is a bug, bug we are not responsible for this. Here you directly pass the object returned by Meteor.status().

So, what’s happen is we assign this object in the component state. When there’s a change, we compare that with the new one.

But here, Meteor update this reference object itself. So, in the shallowEqual stage, both objects are the same. (This is true, even if we did a deepEqual).

So, do this and follow this approach.

const Composer = (props, onData) => {
  const status = Meteor.status();
  // do this or clone the status object
  const data = { status: status.status };
  onData(null, data);
}