arrays - 状態としての配列: 状態の更新は、機能コンポーネント内のすべての子をフックで再レンダリングします

Question

array.map 関数を使用して、単語の膨大なリストをレンダリングしています。ユーザー入力に応じて、個々の配列要素を変更します (一度に 1 つだけ)。

const [words, setWords] = useState();

let wordList = [];
wordList.push({ t: 'word1', a: 1, s: 0 });
wordList.push({ t: 'word2', a: 0, s: 0 });
wordList.push({ t: 'word3', a: 0, s: 0 });
wordList.push({ t: 'word4', a: 0, s: 0 });
wordList.push({ t: 'word5', a: 0, s: 0 });
...etc.
setWords(wordList);

リターン部分：

...
    words.map((word, index) => (
      <Word key={index} word={word} index={index} />
    ))}

一度に 1 つの要素であり、インデックス (キーとして使用する) が変更されないにもかかわらず、単語のリスト全体が状態の変更 (キーストロークごとに発生) で再レンダリングされるため、パフォーマンスの問題が発生します。配列で構成される状態を更新する場合、これは既定の動作ですか? その場合、状態の配列をどのように実装しますか (各単語は独自の状態です)、一度に 1 つの状態のみを更新するため、状態に接続されている個々の子のみを再レンダリングします (または、何かが欠けている/誤解しています) )?