コードレビュー上級約20分

レビュー: React Hooksの問題

typescriptreacthooksperformance

コードレビュー課題

以下のReact + TypeScriptコードをレビューしてください。

背景

ユーザーリストを表示するコンポーネントです。Hooksを使用していますが、依存配列の問題やパフォーマンスの問題があります。

レビュー観点

useEffectの依存配列
無限ループのリスク
useMemo/useCallbackの適切な使用
パフォーマンス最適化

あなたの回答

UserList.tsxtypescript

import React, { useEffect, useState } from 'react';
 
interface User {
  id: number;
  name: string;
  email: string;
}
 
function UserList({ filter }: { filter: string }) {
  const [users, setUsers] = useState<User[]>([]);
 
  const fetchUsers = async () => {
    const response = await fetch(`/api/users?filter=${filter}`);
    const data = await response.json();
    setUsers(data);
  };
 
  useEffect(() => {
    fetchUsers();
  }, [fetchUsers]);
 
  const handleUserClick = (userId: number) => {
    console.log('Clicked user:', userId);
  };
 
  return (
    <ul>
      {users.map(user => (
        <li key={user.id} onClick={() => handleUserClick(user.id)}>
          {user.name} - {user.email}
        </li>
      ))}
    </ul>
  );
}
 
export default UserList;

行番号をクリックしてコメントを追加（Shift+クリックで範囲選択）

レビューサマリー

最低100文字必要です

承認判定

全体の重大度

コメントを追加し、サマリーを100文字以上入力してください

模範解答

回答を送信するか、「表示する」をクリックすると模範解答が表示されます。