memoPureComponent.js

import { useRef } from 'react';

const getComponentName = WrappedComponent => (
  WrappedComponent.displayName || WrappedComponent.name || 'Unknown'
);

const compareProps = (obj1, obj2) => {
  let keys1 = Object.keys(obj1);
  const sameValues = keys1.every(
    key => obj2.hasOwnProperty(key) && obj2[key] === obj1[key],
  );
  return sameValues && keys1.length === Object.keys(obj2).length;
};

const memoPureComponent = WrappedComponent => {
  const Wrapper = (ownProps) => {
    const ref = useRef(null);
    if (!ref.current) {
      ref.current = {
        rendered: WrappedComponent(ownProps),
        props: ownProps,
      };
    } else if (!compareProps(ref.current.props, ownProps)) {
      ref.current.rendered = WrappedComponent(ownProps);
      ref.current.props = ownProps;
    }
    return ref.current.rendered;
  };

  Wrapper.displayName = `memo(${getComponentName(WrappedComponent)})`;
  return Wrapper;
};

export default memoPureComponent;