1

Benchmark created on

Setup

// ===== 테스트 파라미터 =====
const N = 3000;     // branchList 길이 (항목 수)
const ITER = 200;   // 각 테스트 루프 반복 횟수
const MISS_RATIO = 0.05; // 필드가 일부 없는 항목 비율(필터 비용 시뮬레이션)

// ===== branchList 더미 생성 =====
function makeBranch(id) {
  return {
    branch_id: "B" + id,
    branch_nm_ko: "지점_" + id,
    branch_nm_en: "Branch_" + id,
  };
}

// 일부 항목은 필드를 제거해서 filter 비용을 흉내냄
const baseBranchList = Array.from({ length: N }, (_, i) => {
  const b = makeBranch(i);
  if (Math.random() < MISS_RATIO) {
    delete b.branch_nm_en; // 누락 케이스
  }
  return b;
});

// ===== 실제 계산 로직 (useMemo 안의 콜백을 순수 함수화) =====
function createOptions(branchList) {
  const allOption = [{ value: "all", label: "전체" }];
  const branchOptions = (branchList || [])
    .filter(
      (branch) =>
        branch?.branch_id !== undefined &&
        branch?.branch_nm_ko !== undefined &&
        branch?.branch_nm_en !== undefined
    )
    .map((branch) => ({
      value: branch.branch_id,
      label: branch.branch_nm_ko,
    }));
  return allOption.concat(branchOptions);
}

// ===== 메모이즈 버전 (useMemo의 의존성 === 참조 동일성 가정) =====
function makeMemoizedCreateOptions() {
  let lastRef = null;
  let lastResult = null;
  return function memoized(list) {
    if (list === lastRef && lastResult) return lastResult;
    lastRef = list;
    lastResult = createOptions(list);
    return lastResult;
  };
}
const memoizedCreateOptions = makeMemoizedCreateOptions();

// ===== 다양한 참조 시나리오 준비 =====
// 1) 참조가 매 호출 동일한 리스트
const sameRefList = baseBranchList;

// 2) 매 호출 새로운 배열(내용은 동일) - 의존성 변경 시나리오
const clonedLists = Array.from({ length: ITER }, () => baseBranchList.slice());

// 3) 가끔만 참조 변경(예: 50번 중 1번만 변경)
const occasionalLists = Array.from({ length: ITER }, (_, i) =>
  i % 50 === 0 ? baseBranchList.slice() : sameRefList
);

// 최적화(죽은 코드 제거)를 막기 위한 싱크
window.__sink = 0;

Test runner

Ready to run.

Testing in
TestOps/sec
1
let acc = 0;
for (let i = 0; i < ITER; i++) {
  const res = createOptions(sameRefList);
  acc += res.length;
}
window.__sink ^= acc;
ready
2
let acc = 0;
for (let i = 0; i < ITER; i++) {
  const res = memoizedCreateOptions(sameRefList);
  acc += res.length;
}
window.__sink ^= acc;
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.