🧠 코드가 너무 빠를 때만 나타나는 React 버그

Source: Dev.to

🧩 문제: “왜 각 행이 서로 다른 상태를 보는가?”

PrimeReact DataTable에 각 행마다 버튼이 있었습니다. 버튼을 클릭하면 다음과 같은 출력이 나타났습니다:

Button 0 clicked → items.length = 1

클릭 시점의 전역 상태에는 명확히 3개의 아이템이 있었음에도, 각 버튼은 마치 이전 버전의 상태를 기억하고 있는 것처럼 동작했습니다.

🔬 이슈 재현 방법

1. 테이블에 행 3개를 추가한다.
2. 행 1의 버튼을 클릭 → 로그 1.
3. 행 2의 버튼을 클릭 → 로그 2.
4. 행 3의 버튼을 클릭 → 로그 3.

각 행이 과거에 “고정”된 것처럼 보였습니다.

🤔 왜 이렇게 혼란스러웠는가

• UI는 정상적으로 보였다.
• 상태 업데이트는 정상적으로 작동했다.
• 오류나 경고가 나타나지 않았다.
• 메모이제이션을 끄면(cellMemo={false}) “해결”되는 듯했으며, 이것이 단서가 되었다.

🧠 숨겨진 원인: 메모이제이션 + 클로저

PrimeReact의 DataTable은 성능 향상을 위해 셀 메모이제이션(cellMemo=true가 기본) 을 지원합니다. 즉, 특정 메모 키가 변할 때만 셀을 다시 렌더링합니다.

어디서 문제가 발생했나요?

• 기존 행들은 같은 객체 레퍼런스를 유지했다.
• 메모이제이션된 셀은 다시 렌더링되지 않았다.
• 이벤트 핸들러(onClick)는 생성된 렌더 시점의 클로저를 그대로 유지했다.

결과적으로 각 버튼은 생성 시점의 상태 스냅샷을 캡처했으며—메모이제이션 때문에 발생한 고전적인 stale‑closure 문제였습니다. 상태 로직 자체가 원인이 아니었습니다.

🧪 최소 재현 예시 (Pure React)

import React from "react";

const Row = React.memo(
  ({ item, index, snapshotLength }) => {
    const onClick = () => {
      console.log(index, snapshotLength);
    };
    return Click;
  },
  (prev, next) => prev.item === next.item // ❌ snapshotLength 무시
);

snapshotLength가 메모 비교에 포함되지 않아 행이 다시 렌더링되지 않고, 클릭 핸들러는 오래된 데이터를 유지합니다—DataTable 버그와 동일한 상황입니다.

🛠️ 실제 해결 방법 (해킹이 아닌)

빠른 우회 방법

메모이제이션을 끄면 큰 테이블에서 성능 이점을 잃게 됩니다.

올바른 해결책

PrimeReact에서는 행 구조가 바뀔 때마다 메모이제이션 키가 변하도록 조정합니다.

수정 전

cellMemoProps = { index };

수정 후

cellMemoProps = { rowIndex };

rowIndex는 행이 추가, 삭제, 재정렬될 때마다 변하므로, 필요한 경우 메모이제이션된 셀을 다시 렌더링하게 됩니다. 이렇게 하면 성능을 희생하지 않고도 최신 클로저를 확보할 수 있습니다.

✅ 결과

수정을 적용한 뒤:

• Button 0 → items.length = 3
• Button 1 → items.length = 3
• Button 2 → items.length = 3

stale closure가 사라지고, 성능 저하도 없으며, API 변경도 필요하지 않았습니다.

🤯 부가 인사이트: useFieldArray가 “그냥 작동한” 이유

React Hook Form의 useFieldArray를 사용할 때는 버그가 나타나지 않았습니다. useFieldArray는 업데이트 시마다 새로운 객체 레퍼런스를 생성하므로 메모이제이션이 자연스럽게 무효화됩니다. 행이 자동으로 다시 렌더링되죠—마법이 아니라 객체 정체성이 우리 편으로 작용한 결과였습니다.

🧠 핵심 정리

• 메모이제이션 버그는 정체성(identity) 버그이며, 상태 버그가 아니다.
• 동작에 영향을 주는 모든 prop은 메모 무효화 키에 포함시켜야 한다.
• 상태가 올바르더라도 stale closure가 존재할 수 있다.
• 메모이제이션을 끄는 것은 임시 방편일 뿐, 근본적인 해결책이 아니다.
• 성능 최적화에는 추가적인 정확성 관리가 필요하다.

🚀 마무리 생각

이 버그는:

• 불가능해 보였다.
• 로그를 남겨도 사라졌다.
• “단순화”하면 사라졌다.

렌더 스냅샷 관점에서 생각하면 문제를 바로 파악할 수 있습니다. 빠른 피드백과 협업을 제공해 주신 PrimeReact 유지보수팀과 훌륭한 재현 예시를 만들어 주신 원 보고자에게 큰 감사를 전합니다.