React - useMemo() を使用すると依然としてキーボード入力が遅くなる

Question

このコードには多くの入力ボックスがあり、各入力ボックスは価格値を変更するために使用されます。 入力ボックスが多数あるため (エリアごとの価格が 3 つ、価格ごとの価格が 3 つ)、毎回すべてを再レンダリングするのを避けるために、入力ボックスの値を更新する関数で useMemo を使用しました。コードが長すぎて入力ボックスを制御できないことを避けるために useReducer も使用しました。

ただし、文字（または数字）を入力すると、すぐに表示されるわけではなく、表示されるまでに時間がかかりますし、ましてや連続入力する場合も同様です。

const handleUpdate = useMemo(
    () => (プロパティ、値、obid) => {
      dispatch({ タイプ: "UPDATE_DATA", プロパティ, ペイロード: 値, ID: obid });
    }、
    [急送]
  );

そして、リデューサーもあります:

function raiser(state, action) {
    スイッチ (アクション.タイプ) {
...
ケース「UPDATE_DATA」:
        戻る {
          ...州、
          データ: state.data.map((item) => {
            if (アイテム.id === アクション.id) {
              return { ...item, [action.property]: action.payload };
            }
            返却物;
          })、
        };
}
}

問題 (または解決策) が別の場所にある可能性があるため、コード全体を確認することをお勧めします。コード全体を表示するには、このサンドコードボックスのリンクを参照してください。コードの一部をコピーしたため、CSS 形式が悪くなったことをお許しください。 フェッチ関数がシミュレートされたデータの長い配列に置き換えられていることに注意してください。

リンク: https://codesandbox.io/s/unruffled-feynman-g9nox2?file=/src/App.js

Answer 1

通常、useMemo は、レンダリング中に高価な計算値をキャッシュするために使用されます。ただし、あなたの場合、高価なレンダリング計算は必要なく、入力が変更されるたびに非常に大きなツリーをレンダリングするだけです。実際、すべての状態は App コンポーネント上にあるため、アプリ全体が毎回再レンダリングされます。

React でこの問題を最適化する方法は、コンポーネントのレンダリングをできるだけスキップすることです。これを行うには、ページの無関係な部分を異なるコンポーネントに分割します。ロジックを分離したら、React.memo() でラップします。これは、コンポーネントのレンダリングを完全にスキップできる別の最適化手法です。

私にとって、あなたが加えられる最も明白な変更は次のとおりです:

1. TodosDatos は定数であり、レンダリングのたびに再定義する必要がないため (メモリを消費する可能性があります)、TodosDatos を App
コンポーネントから移動します。
2. <Table> を新しいコンポーネントに配置し、React.memo()
を使用してメモ化します。すべてのテーブルの依存関係の値を新しいコンポーネントの props に渡すようにしてください。

これらの変更をここに実装しました: https://codesandbox.io/s/green-breeze-mmum6n?file=/src/App.js

。入力がほぼ瞬時に行われることがわかります。パフォーマンスを向上させるために、他の場所で複数の最適化を行うこともできます。 ###