use-memo

useMemo フックが返り値を伴って使われているか検証します。詳細は、useMemo のドキュメントを参照してください。

ルールの詳細

useMemo は、計算コストの高い値を計算してキャッシュするためのものであり、副作用を実行するためのものではありません。返り値がないと、useMemo は undefined を返し、その目的を果たせません。おそらく、使うフックを間違えているということです。

無効な例

このルールに違反するコードの例です。

// ❌ No return value
function Component({ data }) {
  const processed = useMemo(() => {
    data.forEach(item => console.log(item));
    // Missing return!
  }, [data]);

  return <div>{processed}</div>; // Always undefined
}

有効な例

このルールに従ったコードの例です。

// ✅ Returns computed value
function Component({ data }) {
  const processed = useMemo(() => {
    return data.map(item => item * 2);
  }, [data]);

  return <div>{processed}</div>;
}

トラブルシューティング

依存値が変わったときに副作用を実行したい

以下では、副作用のために useMemo を使おうとしています。

// ❌ Wrong: Side effects in useMemo
function Component({user}) {
  // No return value, just side effect
  useMemo(() => {
    analytics.track('UserViewed', {userId: user.id});
  }, [user.id]);

  // Not assigned to a variable
  useMemo(() => {
    return analytics.track('UserViewed', {userId: user.id});
  }, [user.id]);
}

ユーザの操作に応じて副作用を実行する必要がある場合は、その副作用をイベントの処理と同じ場所に置くのが最善です。

// ✅ Good: Side effects in event handlers
function Component({user}) {
  const handleClick = () => {
    analytics.track('ButtonClicked', {userId: user.id});
    // Other click logic...
  };

  return <button onClick={handleClick}>Click me</button>;
}

副作用によって React の state を外部の状態と同期する（またはその逆を行う）場合は、useEffect を使ってください。

// ✅ Good: Synchronization in useEffect
function Component({theme}) {
  useEffect(() => {
    localStorage.setItem('preferredTheme', theme);
    document.body.className = theme;
  }, [theme]);

  return <div>Current theme: {theme}</div>;
}

Previousunsupported-syntax