問題一覧に戻る
上級パフォーマンス最適化
問題104: React.memo応用

カスタム比較関数を使ったReact.memoの高度な使用方法を学びます。すべてのpropsではなく特定のpropsを比較することで再レンダリングを制御します。複雑なオブジェクトを受け取るが特定のプロパティにのみ依存するコンポーネントの最適化に必須です。カスタム比較関数により細かなパフォーマンス制御が可能になります。

import React from 'react';

interface UserProps {
  user: { id: number; name: string; role: string };
  onSelect: (id: number) => void;
}

{/* カスタム比較関数 */}
const areEqual = (prev: UserProps, next: UserProps) => {
  return (
    prev.user. === next.user.id &&
    prev.user.name === next.user.
  );
};

{/* メモ化されたコンポーネント */}
const UserCard = <UserProps>(({ user, onSelect }) => {
  console.log('Rendering:', user.name);
  return (
    <div onClick={() => onSelect(user.id)}>
      <h3>{user.name}</h3>
      <p>{user.role}</p>
    </div>
  );
}, );

function App() {
  const [users, setUsers] = useState([
    { id: 1, name: 'John', role: 'Admin' },
    { id: 2, name: 'Jane', role: 'User' }
  ]);
  
  const handleSelect = useCallback((id: number) => {
    console.log('Selected:', id);
  }, []);
  
  {/* roleプロパティを更新 */}
  const updateRole = () => {
    setUsers(prev => prev.map(u => 
      u.id === 1 ? { ...u, : 'Super Admin' } : u
    ));
  };
  
  return (
    <>
      {users.map(user => (
        <UserCard key={user.id} user={user} onSelect={handleSelect} />
      ))}
      <button onClick={updateRole}>Update Role</button>
    </>
  );
}

export default App;