const treeHeight = 11;
const childrenPerNode = 2;
// Number of nodes under Child: childrenPerNode**(treeHeight+1) - 1
const numProps = 100;
// Copied from React (default arePropsEqual)
function shallowEqual(objA, objB) {
  if (Object.is(objA, objB)) return true;
  if (
    typeof objA !== 'object' ||
    objA === null ||
    typeof objB !== 'object' ||
    objB === null
  ) {
    return false;
  }
  const keysA = Object.keys(objA);
  const keysB = Object.keys(objB);
  if (keysA.length !== keysB.length) return false;
  for (let i = 0; i < keysA.length; i++) {
    const currentKey = keysA[i];
    if (
      !objB.hasOwnProperty(currentKey) ||
      !Object.is(objA[currentKey], objB[currentKey])
    ) {
      return false;
    }
  }
  return true;
}
const e = React.createElement;
const TreeNode = ({height, numChildren, key}) => {
	const children = [];
	for (let i = 0; height > 0 && i < numChildren; i++) {
		const child = e(TreeNode, {key: i, height: height - 1, numChildren}, null);
		children.push(child);
	}
	e("div", {key}, children);
};
const Child = (props) => {
	return e(TreeNode, {height: treeHeight, numChildren: childrenPerNode}, null);
};
const MemoChild = React.memo(Child);
const CustomCompareMemoChild = React.memo(Child, shallowEqual);
const makeProps = (numProps) => {
	const o = {};
	for (let i = 0; i < numProps; i++) {
		o[`${i}`] = i;
	}
	return o;
};
const props = makeProps(numProps);
const ParentOfChild = () => e(Child, props, null);
const ParentOfMemoChild = () => e(MemoChild, props, null);
const ParentOfCustomCompareMemoChild = () => e(CustomCompareMemoChild, props, null);
const root = ReactDOM.createRoot(document.getElementById('root'));
const parentOfChildElement = e(ParentOfChild, null, null);
const parentOfMemoChildElement = e(ParentOfMemoChild, null, null);
const parentOfCustomCompareMemoChildElement = e(ParentOfCustomCompareMemoChild, null, null);