Premature Optimization: Vercel の React Best Practices を個人開発に適用できるか試したら逆効果だった話

interface CategoryChartProps {
  distribution: CategoryDistribution[];
}

export function CategoryChart({ distribution }: CategoryChartProps) {
  if (distribution.length === 0) return null;

  const maxPercentage = Math.max(...distribution.map((d) => d.percentage), 1);

  return (
    <div className="chart-container">
      {distribution.slice(0, 6).map((item) => (
        <div key={item.categoryId} className="bar-item">
          <span>{item.categoryName}</span>
          <div
            className="bar"
            style={{ width: `${(item.percentage / maxPercentage) * 100}%` }}
          />
        </div>
      ))}
    </div>
  );
}

import { memo, useMemo } from 'react';

interface CategoryChartProps {
  distribution: CategoryDistribution[];
}

export const CategoryChart = memo(function CategoryChart({
  distribution,
}: CategoryChartProps) {
  const maxPercentage = useMemo(
    () => Math.max(...distribution.map((d) => d.percentage), 1),
    [distribution],
  );

  const sortedDistribution = useMemo(
    () => distribution.slice(0, 6),
    [distribution],
  );

  if (sortedDistribution.length === 0) return null;

  return (
    <div className="chart-container">
      {sortedDistribution.map((item) => (
        <div key={item.categoryId} className="bar-item">
          <span>{item.categoryName}</span>
          <div
            className="bar"
            style={{ width: `${(item.percentage / maxPercentage) * 100}%` }}
          />
        </div>
      ))}
    </div>
  );
});

function FeedList({ feeds }: { feeds: Feed[] }) {
  const handleRefresh = (feedId: string) => {
    refreshFeed.mutate(feedId);
  };

  const handleDelete = (feedId: string) => {
    deleteFeed.mutate(feedId);
  };

  return (
    <div>
      {feeds.map((feed) => (
        <FeedItem
          key={feed.id}
          feed={feed}
          onRefresh={() => handleRefresh(feed.id)}
          onDelete={() => handleDelete(feed.id)}
        />
      ))}
    </div>
  );
}

import { memo, useCallback } from 'react';

const FeedItem = memo(function FeedItem({
  feed,
  onRefresh,
  onDelete,
}: FeedItemProps) {
  return (
    <div className="feed-item">
      <span>{feed.title}</span>
      <button onClick={onRefresh}>Refresh</button>
      <button onClick={onDelete}>Delete</button>
    </div>
  );
});

function FeedList({ feeds }: { feeds: Feed[] }) {
  const handleRefresh = useCallback((feedId: string) => {
    refreshFeed.mutate(feedId);
  }, []);

  const handleDelete = useCallback((feedId: string) => {
    deleteFeed.mutate(feedId);
  }, []);

  return (
    <div>
      {feeds.map((feed) => (
        <FeedItem
          key={feed.id}
          feed={feed}
          onRefresh={() => handleRefresh(feed.id)}
          onDelete={() => handleDelete(feed.id)}
        />
      ))}
    </div>
  );
}

import { Button, Card, Dialog, Skeleton, toast } from '@/components/ui';

import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { Dialog } from '@/components/ui/dialog';
import { Skeleton } from '@/components/ui/skeleton';
import { toast } from '@/components/ui/sonner';

// memo() は内部でこのような比較を毎回行う
function shallowEqual(prevProps, nextProps) {
  const prevKeys = Object.keys(prevProps);
  const nextKeys = Object.keys(nextProps);

  if (prevKeys.length !== nextKeys.length) return false;

  for (let key of prevKeys) {
    if (prevProps[key] !== nextProps[key]) return false;
  }
  return true;
}

// useMemo の内部イメージ
function useMemo(factory, deps) {
  const hook = getHook();

  if (depsChanged(hook.deps, deps)) {
    hook.value = factory(); // 新しいオブジェクトを作成
    hook.deps = deps; // deps 配列も保持
  }

  return hook.value;
}

function Dashboard() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const id = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(id);
  }, []);

  return (
    <div>
      <Clock time={time} /> {/* 毎秒更新 */}
      <ExpensiveChart data={data} /> {/* data は変わらない → memo() が有効 */}
    </div>
  );
}

const ExpensiveChart = memo(function ExpensiveChart({ data }) {
  // 重い描画処理
});

function SearchResults({ items, query }) {
  // 1000件以上のフィルタリング・ソートなど重い処理
  const filteredItems = useMemo(() => {
    return items
      .filter((item) => item.name.includes(query))
      .sort((a, b) => b.score - a.score);
  }, [items, query]);

  return <List items={filteredItems} />;
}

function ParentWithMemoizedChild() {
  const [count, setCount] = useState(0);

  // MemoizedChild に渡すので useCallback が必要
  const handleClick = useCallback(() => {
    console.log('clicked');
  }, []);

  return (
    <div>
      <button onClick={() => setCount((c) => c + 1)}>Count: {count}</button>
      <MemoizedChild onClick={handleClick} />
    </div>
  );
}

const MemoizedChild = memo(function MemoizedChild({ onClick }) {
  return <button onClick={onClick}>Click me</button>;
});

// Before: 3行
const maxPercentage = Math.max(...distribution.map((d) => d.percentage), 1);

// After: 6行
const maxPercentage = useMemo(
  () => Math.max(...distribution.map((d) => d.percentage), 1),
  [distribution],
);

// deps 配列の管理が必要
const handleClick = useCallback(() => {
  doSomething(a, b, c);
}, [a, b, c]); // ← 抜け漏れがあるとバグの原因に

// React Compiler が有効な場合、これだけで最適化される
function MyComponent({ data }) {
  const processed = data.map((x) => x * 2); // 自動で useMemo 相当に
  return <Child data={processed} />; // 自動で memo 相当に
}