Compare the fetched data with the previous one to decide whether rendering

1

I use Meteor/React.

Is there anyway to compare current data with the previous one to decide whether it needs to render the view or to manipulate the data which has high costs and is inefficient?

// use react-meteor-data to bind the Meteor data to React components
createContainer((props) => {
  Meteor.subscribe('some_collectoin');

  // fetch the new data
  const data = SomeCollection.findOne({...});

  // get the previous data for comparison
  const previousData = ...     // how to get it?
  const previousResults = ...  // how to get it?

  // only update the results if required
  let result;
  if (needsUpdate(data, previousData)) {
    // Calling calculateResult() is heavy work. Should avoid calling this as possible.
    result = calculateResult(data);    
  } else {
    // if data is not changed, use the same results and skip rendering the page
    result = previousResults;
    // how to skip page rendering?
  }

  return {
    data: data,
    results: results
  };
}, ChartComponent)
2

Not sure about why you’d want to proceed like this when you can simply use Cursor’s reactivity with props or react states, but you can use EJSON.stringify( object ) on both the new and previous document to check if it’s equal.

const needsUpdate = ( previousData, newData ) {
    const previousStr = EJSON.stringify( previousData );
    const newStr = EJSON.stringify( newData );

    return ( previousStr === newStr );
};

You might even optimize it easily by stringify-ing the previous data only when a diff is detected.