React の自動最適化: メモ、useMemo、および useCallback とは別れますか?-jsチュートリアル-php.cn

React の自動最適化: メモ、useMemo、および useCallback とは別れますか?

Mary-Kate Olsen

リリース： 2025-01-07 20:31:41

オリジナル

550 人が閲覧しました

React Automatic Optimization: Goodbye memo, useMemo, and useCallback?

React 19 では、パフォーマンスの最適化、特にメモ化の処理方法が大幅に改善されました。 memo、useMemo、useCallback がどのように進化し、現在デフォルトでどのように最適化されているかを見てみましょう。

React におけるメモ化の進化

以前の React 18 では、開発者は不必要な再レンダリングを防ぎ、パフォーマンスを最適化するために、いつメモ化手法を使用するかを慎重に検討する必要がありました。 React 19 は、これらのツールをより効率的にし、多くの場合不要にする自動最適化を導入することで、このパラダイムを変えています。

React 19 のメモ: よりスマートなコンポーネントのメモ化

React 19 のメモでは、コンポーネントをいつ再レンダリングするかについて大幅にインテリジェントになりました。フレームワークは、プロップの変更とコンポーネントの出力への影響を自動的に追跡します。

例 1: 基本的なプロパティの比較

// React 18
const UserCard = memo(({ user, onUpdate }) => {
  return (
    <div>
      <h2>{user.name}</h2>
      <button onClick={onUpdate}>Update</button>
    </div>
  );
});

// React 19
// memo is now automatically optimized
const UserCard = ({ user, onUpdate }) => {
  return (
    <div>
      <h2>{user.name}</h2>
      <button onClick={onUpdate}>Update</button>
    </div>
  );
});

ログイン後にコピー

例 2: ネストされたコンポーネント

// React 18
const CommentThread = memo(({ comments, onReply }) => {
  return (
    <div>
      {comments.map(comment => (
        <Comment 
          key={comment.id}
          {...comment}
          onReply={onReply}
        />
      ))}
    </div>
  );
});

// React 19
const CommentThread = ({ comments, onReply }) => {
  return (
    <div>
      {comments.map(comment => (
        <Comment 
          key={comment.id}
          {...comment}
          onReply={onReply}
        />
      ))}
    </div>
  );
});

ログイン後にコピー

useMemo: 値の自動メモ化

React 19 の useMemo は、メモ化が有益なタイミングを自動的に検出するように最適化され、手動による最適化の必要性が減りました。

例 1: 高価な計算

// React 18
const ExpensiveChart = ({ data }) => {
  const processedData = useMemo(() => {
    return data.map(item => ({
      ...item,
      value: complexCalculation(item.value)
    }));
  }, [data]);

  return <ChartComponent data={processedData} />;
};

// React 19
const ExpensiveChart = ({ data }) => {
  // React 19 automatically detects expensive operations
  const processedData = data.map(item => ({
    ...item,
    value: complexCalculation(item.value)
  }));

  return <ChartComponent data={processedData} />;
};

ログイン後にコピー

例 2: オブジェクト参照

// React 18
const UserProfile = ({ user }) => {
  const userStyles = useMemo(() => ({
    background: user.premium ? 'gold' : 'silver',
    border: `2px solid ${user.active ? 'green' : 'gray'}`
  }), [user.premium, user.active]);

  return <div>



<h3>
  
  
  Example 3: Derived State
</h3>



<pre class="brush:php;toolbar:false">// React 18
const FilteredList = ({ items, filter }) => {
  const filteredItems = useMemo(() => 
    items.filter(item => item.category === filter),
    [items, filter]
  );

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

// React 19
const FilteredList = ({ items, filter }) => {
  // React 19 automatically optimizes derived state
  const filteredItems = items.filter(item => item.category === filter);
  return <List items={filteredItems} />;
};

ログイン後にコピー

useCallback: よりスマートな関数のメモ化

React 19 の useCallback は、関数の安定性と参照の等価性に関してよりインテリジェントになりました。

例 1: イベントハンドラー

// React 18
const TodoList = ({ todos, onToggle }) => {
  const handleToggle = useCallback((id) => {
    onToggle(id);
  }, [onToggle]);

  return todos.map(todo => (
    <TodoItem 
      key={todo.id}
      {...todo}
      onToggle={handleToggle}
    />
  ));
};

// React 19
const TodoList = ({ todos, onToggle }) => {
  // React 19 automatically maintains function stability
  const handleToggle = (id) => {
    onToggle(id);
  };

  return todos.map(todo => (
    <TodoItem 
      key={todo.id}
      {...todo}
      onToggle={handleToggle}
    />
  ));
};

ログイン後にコピー

例 2: 依存関係のあるコールバック

// React 18
const SearchComponent = ({ onSearch, searchParams }) => {
  const debouncedSearch = useCallback(
    debounce((term) => {
      onSearch({ ...searchParams, term });
    }, 300),
    [searchParams, onSearch]
  );

  return <input onChange={e => debouncedSearch(e.target.value)} />;
};

// React 19
const SearchComponent = ({ onSearch, searchParams }) => {
  // React 19 handles function stability automatically
  const debouncedSearch = debounce((term) => {
    onSearch({ ...searchParams, term });
  }, 300);

  return <input onChange={e => debouncedSearch(e.target.value)} />;
};

ログイン後にコピー

例 3: 複雑なイベント処理

// React 18
const DataGrid = ({ data, onSort, onFilter }) => {
  const handleHeaderClick = useCallback((column) => {
    onSort(column);
    onFilter(column);
  }, [onSort, onFilter]);

  return (
    <table>
      <thead>
        {columns.map(column => (
          <th key={column} onClick={() => handleHeaderClick(column)}>
            {column}
          </th>
        ))}
      </thead>
      {/* ... */}
    </table>
  );
};

// React 19
const DataGrid = ({ data, onSort, onFilter }) => {
  // React 19 optimizes function creation and stability
  const handleHeaderClick = (column) => {
    onSort(column);
    onFilter(column);
  };

  return (
    <table>
      <thead>
        {columns.map(column => (
          <th key={column} onClick={() => handleHeaderClick(column)}>
            {column}
          </th>
        ))}
      </thead>
      {/* ... */}
    </table>
  );
};

ログイン後にコピー