問題一覧に戻る
中級Context API
問題74: Contextパフォーマンス

値とsetterを別々のContextに分割してContextのパフォーマンスを最適化する方法を学びます。setter関数のみを使用する場合の不要な再レンダリングを防ぎます。setterのみが必要なコンポーネントは値が変わっても再レンダリングされません。Context重視のアプリケーションでのパフォーマンス最適化に必須のテクニックです。

import React, { createContext, useContext, useState, useMemo } from 'react';

const CountContext = createContext();
{/* setter用のContextを作成 */}
const SetCountContext = ();

function Display() {
  {/* 値のみを取得 */}
  const count = (CountContext);
  return <div>Count: {count}</div>;
}

function Controls() {
  {/* setterのみを取得 */}
  const setCount = ();
  return <button onClick={() => setCount(c => c + 1)}>+</button>;
}

function App() {
  const [count, setCount] = useState(0);
  
  {/* setterをメモ化 */}
  const memoSetCount = (
    () => setCount,
    []
  );
  
  return (
    <CountContext.Provider value={count}>
      <SetCountContext. value={}>
        <Display />
        <Controls />
      </SetCountContext.Provider>
    </CountContext.Provider>
  );
}

export default App;