React Memo comparison deep objects using JSON.stringify()

react-memo-deep-objects-comparison.js

export const isPrimitive = (val) => {
  if (val === null) {
    return true;
  }

  if (typeof val === "object" || typeof val === "function") {
    return false;
  } else {
    return true;
  }
};

export const omitNotPrimitiveProps = (row) => {
  const _row = {};

  Object.keys(row).map((key) => {
    if (isPrimitive(row[key])) {
      _row[key] = row[key];
    }
  });

  return _row;
};


// Usage example

export default memo(DataTable, (prevProps, nextProps) => {
  const { table: prevTableProp, ...prevPrimitiveProps } = prevProps;
  const { table: nextTableProp, ...nextPrimitiveProps } = nextProps;

  const primitivePropsAreEqual =
    JSON.stringify(omitNotPrimitiveProps(prevPrimitiveProps)) ===
    JSON.stringify(omitNotPrimitiveProps(nextPrimitiveProps));

  const tableColumnsAreEqual =
    JSON.stringify(prevTableProp.columns) ===
    JSON.stringify(nextTableProp.columns);

  const tableRowsAreEqual =
    JSON.stringify(prevTableProp.rows.map(omitNotPrimitiveProps)) ===
    JSON.stringify(nextTableProp.rows.map(omitNotPrimitiveProps));

  return primitivePropsAreEqual && tableColumnsAreEqual && tableRowsAreEqual;
});