memoize.js

/**
 *
 * Memoization utility
 *
 * @param cb - callback to determine when to return stale children
 * @param key - name of the memo
 * @param target - children you want to memoize
 *
 */

const EMPTY_ARR = Object.freeze([])
const INIT_STORAGE = { stale: EMPTY_ARR, target: EMPTY_ARR }

const memoize = cb => {
  const storage = {}

  return (key, target) => {
    const ref = storage[key] = storage[key] ?? INIT_STORAGE
    return cb(target) ? (ref.target = ref.stale) : (ref.stale = target)
  }
}

/**
 *
 * Your component
 *
 */

const memo = memoize(target => target.length === 0)

const Component = props => {
  return (
    <div>
      <div>{memo('foo', props.oneMillionChildren)}</div>
      <div>{memo('bar', props.twentyThousandChildren)}</div>
    </div>
  )
}