// 단순히 '무거울 것 같아서' memo로 감쌈
const HeavyComponent = memo(() => {
  // 실제로는 전혀 무겁지 않은데 측정도 안 해봄...
});

// '남들이 다 쓰니까' useCallback 사용
const handleClick = useCallback(() => {
  console.log('clicked');
}, []); // 의존성 배열이 비어있음 = 매번 생성하는 것과 비용 차이 미미함

// 모든 것을 memo화 (과거의 나)
// props 비교 비용 > 리렌더링 비용 인 경우, 오히려 손해입니다.
const Button = memo(({ onClick, label }) => {
  return <button onClick={onClick}>{label}</button>;
});

// 계산 비용이 높거나, 부모가 빈번하게 리렌더링 되는 경우
const ExpensiveList = memo(({ items }: { items: Item[] }) => {
  // 1000건 이상의 리스트를 렌더링하는 경우라면 효과적입니다.
  return (
    <>
      {items.map(item => (
        <ComplexItem key={item.id} {...item} />
      ))}
    </>
  );
});

// 가벼운 계산에도 useMemo 사용 (메모리 낭비)
const isEven = useMemo(() => count % 2 === 0, [count]);

// 무거운 계산이거나, 참조의 안정성이 필요한 객체/배열일 경우
const Report = ({ transactions }: { transactions: Transaction[] }) => {
  // 10만 건의 데이터를 순회하며 집계하는 처리는 확실히 무겁습니다.
  const summary = useMemo(() => {
    return transactions.reduce((acc, t) => {
      acc.total += t.amount;
      acc.count += 1;
      // 복잡한 비즈니스 로직 포함...
      return acc;
    }, { total: 0, count: 0, byCategory: {} });
  }, [transactions]);

  return <SummaryView data={summary} />;
};

// 의미 없는 useCallback
const handleClick = useCallback(() => {
  setCount(count + 1);
}, [count]); // count가 변할 때마다 함수가 새로 생성되므로 의미가 없습니다.

// 자식 컴포넌트(특히 memo된 컴포넌트)의 불필요한 렌더링을 막을 때
const TodoList = () => {
  const [todos, setTodos] = useState<Todo[]>([]);

  // TodoItem이 memo로 감싸져 있으므로, 핸들러 함수의 참조를 고정해야 효과를 봅니다.
  const handleToggle = useCallback((id: string) => {
    setTodos(prev =>
      prev.map(todo =>
        todo.id === id
          ? { ...todo, completed: !todo.completed }
          : todo
      )
    );
  }, []); // 의존성 배열이 비어있어 함수 참조가 불변함

  return (
    <>
      {todos.map(todo => (
        <TodoItem
          key={todo.id}
          todo={todo}
          onToggle={handleToggle} // 안정적인 참조 전달
        />
      ))}
    </>
  );
};

// memo화된 자식 컴포넌트
const TodoItem = memo(({ todo, onToggle }: TodoItemProps) => {
  console.log('TodoItem render'); // onToggle이 바뀌지 않으면 리렌더링 되지 않음
  return (
    <div onClick={() => onToggle(todo.id)}>
      {todo.title}
    </div>
  );
});

// 너무 단순한 컴포넌트
const Label = memo(({ text }: { text: string }) => {
  return <span>{text}</span>;
  // 비교 비용 > 렌더링 비용. 배보다 배꼽이 더 큽니다.
});

// 의존성을 빼먹어 과거의 값을 참조하는 클로저 문제 발생
const handleUpdate = useCallback(() => {
  updateUser(userId); // userId가 바뀌어도 이 함수는 옛날 userId를 기억함
}, []);

// ESLint의 exhaustive-deps 규칙을 켜고, 시키는 대로 넣으세요
const handleUpdate = useCallback(() => {
  updateUser(userId);
}, [userId, updateUser]); // 모든 의존성을 명시

// 예상: filter 함수가 느릴 것이다
const filtered = items.filter(item => item.active); // 실제 측정: 0.1ms 소요

// 실제 범인: 리스트 아이템의 렌더링
return items.map(item => <HeavyComponent key={item.id} {...item} />); // 실제 측정: 15ms 소요

const UserList = ({ users }: { users: User[] }) => {
  // useCallback으로 렌더러 함수의 참조를 고정
  const rowRenderer = useCallback(({ index, style }) => {
    const user = users[index];
    return (
      <div style={style}>
        {/* UserRow는 memo로 감싸져 있어, 스크롤 시 불필요한 렌더링 방지 */}
        <UserRow user={user} />
      </div>
    );
  }, [users]);

  return (
    <VirtualList
      height={600}
      itemCount={users.length}
      itemSize={50}
      rowRenderer={rowRenderer}
    />
  );
};

const UserRow = memo(({ user }: { user: User }) => {
  return <div>{user.name}</div>;
});

const Dashboard = () => {
  const [metrics, setMetrics] = useState<Metrics>({});

  // WebSocket 메시지가 올 때마다 setMetrics 호출 -> Dashboard 리렌더링 발생
  useEffect(() => {
    const ws = new WebSocket('...');
    ws.onmessage = (e) => {
      const update = JSON.parse(e.data);
      setMetrics(prev => ({ ...prev, ...update }));
    };
    return () => ws.close();
  }, []);

  return (
    <>
      {/*
        각 컴포넌트는 memo화 되어 있어,
        cpu 값이 변할 때 MemoryMetric이나 NetworkMetric은 리렌더링 되지 않음
      */}
      <CPUMetric value={metrics.cpu} />
      <MemoryMetric value={metrics.memory} />
      <NetworkMetric value={metrics.network} />
    </>
  );
};

const CPUMetric = memo(({ value }: { value?: number }) => {
  return <MetricCard title="CPU" value={value} />;
});

const ComplexForm = () => {
  const [formData, setFormData] = useState<FormData>({});

  // 커링(Currying) 기법을 사용하되, 가장 바깥 함수를 useCallback으로 감쌈
  const createFieldHandler = useCallback((fieldName: string) => {
    return (value: any) => {
      setFormData(prev => ({ ...prev, [fieldName]: value }));
    };
  }, []);

  // 검증 로직이 무겁다면 debounce 처리하여 입력이 멈췄을 때만 실행
  const validation = useMemo(() => {
    return debounce((data: FormData) => {
      return validateFormData(data);
    }, 300);
  }, []);

  useEffect(() => {
    validation(formData);
  }, [formData, validation]);

  return (
    <form>
      {/* createFieldHandler('email')의 결과는 매번 같아야 함을 보장하려면 추가적인 구조 개선 필요 */}
      {/* React Hook Form 같은 라이브러리를 쓰는 것이 사실 가장 빠릅니다 */}
      <Field name="email" onChange={createFieldHandler('email')} />
      <Field name="password" onChange={createFieldHandler('password')} />
    </form>
  );
};

// 1. 일단 측정부터 한다 (Performance API 또는 React Profiler)
const measure = () => {
  performance.mark('start');
  // ...무거운 작업...
  performance.mark('end');
  performance.measure('작업시간', 'start', 'end');
};

// 2. 최적화가 정말 필요한지 판단한다
const needsOptimization = (renderTime: number): boolean => {
  // 인간이 끊김을 느끼기 시작하는 시간은 프레임당 약 16ms (60fps 기준)
  return renderTime > 16;
};

// 3. 상황에 맞는 무기를 고른다
const optimizationStrategy = {
  heavyComputation: 'useMemo 사용',
  frequentRerender: 'React.memo 및 컴포넌트 분리',
  stableReference: 'useCallback (주로 자식 props 전달용)',
  largeList: '가상화 (Windowing)',
  deepStateUpdate: 'Immer 사용 또는 상태 정규화'
};