Code ReviewAdvanced~20 min

Review: React Hooks Issues

typescriptreacthooksperformance

Code Review Task

Please review the following React + TypeScript code.

Background

This is a component that displays a user list. It uses Hooks but has issues with dependency arrays and performance.

Review Criteria

useEffect dependency arrays
Infinite loop risks
Proper use of useMemo/useCallback
Performance optimization

Your Answer

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+クリックで範囲選択）

Review Summary

Minimum 100 characters required

Approval Decision

Overall Severity

Add comments and enter at least 100 characters in the summary

Model Answer

Submit your answer or click "Show" to view the model answer.