React 렌더링 폭주? 리렌더 원인 추적 실전 가이드

// 디버깅 마커 예시
console.time('render-storm');
// ... 문제 액션 수행
console.timeEnd('render-storm');

import { useEffect, useRef } from 'react';

export function useRenderCount(name: string) {
  const count = useRef(0);
  count.current += 1;

  useEffect(() => {
    // 커밋 이후 카운트 확인
    console.log(`[render] ${name}:`, count.current);
  });
}

function UserPanel(props: { userId: string }) {
  useRenderCount('UserPanel');
  // ...
  return <div />;
}

import { useEffect, useRef } from 'react';

type AnyProps = Record<string, unknown>;

export function useWhyPropsChanged(name: string, props: AnyProps) {
  const prev = useRef<AnyProps | null>(null);

  useEffect(() => {
    if (!prev.current) {
      prev.current = props;
      return;
    }

    const allKeys = new Set([...Object.keys(prev.current), ...Object.keys(props)]);
    const changes: Record<string, { before: unknown; after: unknown }> = {};

    allKeys.forEach((key) => {
      const before = prev.current![key];
      const after = props[key];
      if (!Object.is(before, after)) {
        changes[key] = { before, after };
      }
    });

    if (Object.keys(changes).length > 0) {
      console.log(`[why-render] ${name}`, changes);
    }

    prev.current = props;
  });
}

function SearchResultList(props: { items: any[]; onClickItem: (id: string) => void }) {
  useWhyPropsChanged('SearchResultList', props);
  return null;
}

npm i -D @welldone-software/why-did-you-render

import React from 'react';

if (process.env.NODE_ENV === 'development') {
  // eslint-disable-next-line @typescript-eslint/no-var-requires
  const whyDidYouRender = require('@welldone-software/why-did-you-render');

  whyDidYouRender(React, {
    trackAllPureComponents: true,
  });
}

if (process.env.NODE_ENV === 'development') {
  import('./wdyr');
}

const ItemRow = React.memo(function ItemRow({ item }: { item: { id: string } }) {
  return <div>{item.id}</div>;
});

// WDYR가 추적하도록 플래그
(ItemRow as any).whyDidYouRender = true;

// 나쁜 예: options가 매 렌더마다 새 객체
<Chart options={{ color: 'red', showLegend: true }} />

// 나쁜 예: onClick이 매 렌더마다 새 함수
<Button onClick={() => doSomething(id)} />

const options = useMemo(() => ({ color: 'red', showLegend: true }), []);
const onClick = useCallback(() => doSomething(id), [id]);

<Chart options={options} />
<Button onClick={onClick} />

// 나쁜 예: Provider value가 매 렌더마다 새 객체
<AuthContext.Provider value={{ user, logout }}>
  {children}
</AuthContext.Provider>

const value = useMemo(() => ({ user, logout }), [user, logout]);

<AuthContext.Provider value={value}>{children}</AuthContext.Provider>

// 나쁜 예: props로 계산 가능한 값을 state로 다시 저장
const [fullName, setFullName] = useState('');
useEffect(() => {
  setFullName(`${user.first} ${user.last}`);
}, [user]);

const fullName = `${user.first} ${user.last}`;

const [data, setData] = useState<any>(null);

useEffect(() => {
  fetch('/api').then((r) => r.json()).then(setData);
}, [data]); // 나쁜 예: data가 바뀌면 effect 재실행 → setData → 무한 반복

useEffect(() => {
  let cancelled = false;
  (async () => {
    const r = await fetch('/api');
    const json = await r.json();
    if (!cancelled) setData(json);
  })();
  return () => {
    cancelled = true;
  };
}, []);

function useRafThrottledState<T>(initial: T) {
  const [state, setState] = useState(initial);
  const frame = useRef<number | null>(null);
  const next = useRef<T>(initial);

  const setRaf = useCallback((v: T) => {
    next.current = v;
    if (frame.current != null) return;
    frame.current = requestAnimationFrame(() => {
      frame.current = null;
      setState(next.current);
    });
  }, []);

  useEffect(() => () => {
    if (frame.current != null) cancelAnimationFrame(frame.current);
  }, []);

  return [state, setRaf] as const;
}

type Props = {
  item: { id: string; name: string };
  onClick: (id: string) => void;
};

const Row = React.memo(function Row({ item, onClick }: Props) {
  return <div onClick={() => onClick(item.id)}>{item.name}</div>;
});

useRenderCount('SuspiciousComponent');