Uniq Benchmark

App.tsx

import { useState } from "react";
import { uniq } from "lodash";
import "./App.css";

function uniqSet(arr: unknown[]) {
  return Array.from(new Set(arr));
}

function getRandomInt(min: number, max: number) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min) + min);
}

const small = 100;
const large = 10000000;

const arrRandomSmall = Array(small)
  .fill(null)
  .map(() => Math.random());

const arrRandomLarge = Array(large)
  .fill(null)
  .map(() => Math.random());

const arrIntSmall = Array(small)
  .fill(null)
  .map(() => getRandomInt(0, 100));

const arrIntLarge = Array(large)
  .fill(null)
  .map(() => getRandomInt(0, 100));

function benchSet(arr: number[]) {
  const start = performance.now();
  uniqSet(arr);
  const end = performance.now();
  return end - start;
}

function benchUniq(arr: number[]) {
  const start = performance.now();
  uniq(arr);
  const end = performance.now();
  return end - start;
}

function runManyTimes(callback: () => number) {
  const times = Array(100000)
    .fill(null)
    .map(() => callback());
  return times.reduce((acc, curr) => acc + curr, 0);
}

function App() {
  const [setRandomSmallTime, setSetRandomSmallTime] = useState(0);
  const [setRandomLargeTime, setSetRandomTimeTime] = useState(0);
  const [setIntSmallTime, setSetIntSmallTime] = useState(0);
  const [setIntLargeTime, setSetIntLargeTime] = useState(0);

  const [uniqRandomSmallTime, setUniqRandomSmallTime] = useState(0);
  const [uniqRandomLargeTime, setUniqRandomTimeTime] = useState(0);
  const [uniqIntSmallTime, setUniqIntSmallTime] = useState(0);
  const [uniqIntLargeTime, setUniqIntLargeTime] = useState(0);

  return (
    <div>
      <button
        onClick={() =>
          setSetRandomSmallTime(runManyTimes(() => benchSet(arrRandomSmall)))
        }
      >
        Set Random Small Many Times
      </button>
      <div>
        Set Random Small Many Times Time: {Math.round(setRandomSmallTime)}
      </div>

      <button onClick={() => setSetRandomTimeTime(benchSet(arrRandomLarge))}>
        Set Random Large
      </button>
      <div>Set Random Large Time: {Math.round(setRandomLargeTime)}</div>

      <button
        onClick={() =>
          setSetIntSmallTime(runManyTimes(() => benchSet(arrIntSmall)))
        }
      >
        Set Int Small Many Times
      </button>
      <div>Set Int Small Many Times Time: {Math.round(setIntSmallTime)}</div>

      <button onClick={() => setSetIntLargeTime(benchSet(arrIntLarge))}>
        Set Int Large
      </button>
      <div>Set Int Large Time: {Math.round(setIntLargeTime)}</div>

      <hr />

      <button
        onClick={() =>
          setUniqRandomSmallTime(runManyTimes(() => benchUniq(arrRandomSmall)))
        }
      >
        Uniq Random Small Many Times
      </button>
      <div>
        Uniq Random Small Many Times Time: {Math.round(uniqRandomSmallTime)}
      </div>

      <button onClick={() => setUniqRandomTimeTime(benchUniq(arrRandomLarge))}>
        Uniq Random Large
      </button>
      <div>Uniq Random Large Time: {Math.round(uniqRandomLargeTime)}</div>

      <button
        onClick={() =>
          setUniqIntSmallTime(runManyTimes(() => benchUniq(arrIntSmall)))
        }
      >
        Uniq Int Small Many Times
      </button>
      <div>Uniq Int Small Many Times Time: {Math.round(uniqIntSmallTime)}</div>

      <button onClick={() => setUniqIntLargeTime(benchUniq(arrIntLarge))}>
        Uniq Int Large
      </button>
      <div>Uniq Int Large Time: {Math.round(uniqIntLargeTime)}</div>
    </div>
  );
}

export default App;