function useMemoizedResultData<T>(results: { data: T }[]): T[] {
  const previousResultData = useRef<T[]>([])
  const resultData = results.map((result) => result.data)

  if (areArraysEqual(previousResultData.current, resultData)) {
    return previousResultData.current
  }

  previousResultData.current = resultData
  return resultData
}

/** Returns true when `a` and `b` are arrays with perfectly identical contents. */
function areArraysEqual(a?: unknown[], b?: unknown[]): boolean {
  if (a === b) return true
  if (a?.length !== b?.length) return false
  return !!a?.every((item, i) => item === b?.[i])
}

function useMemoizedResultData<T>(results: { data: T }[]): T[] {
  const previousResultData = useRef<T[]>([])
  const resultData = results.map((result) => result.data)

  if (areArraysEqual(previousResultData.current, resultData)) {
    return previousResultData.current
  }

  previousResultData.current = resultData
  return resultData
}

/** Returns true when `a` and `b` are arrays with perfectly identical contents. */
function areArraysEqual(a?: unknown[], b?: unknown[]): boolean {
  if (a === b) return true
  if (a?.length !== b?.length) return false
  return !!a?.every((item, i) => item === b?.[i])
}

  const foo = useMemo(() => {
    console.log('memo recreated')
    return results.map((result) => result.data?.id)
  }, [results[0]?.data])

  const foo = useMemo(() => {
    console.log('memo recreated')
    return results.map((result) => result.data?.id)
  }, [results[0]?.data])