Stateで管理している配列の、変更した部分のみを再レンダリングするようにしたい。

Question

配列にそれぞれのカウント数を入れて、それをStateで管理している状態です。
カウントの変わった部分のみを再レンダリングしたいのですが、方法が分らず困っています。
react.memoとuseCallbackは試してみたのですが、依存している配列自体は変わっているため、上手くいきませんでした。
下記のプログラムは質問用に組んだものなので軽い処理ですが、実際に使用するものはCounter部分の数が多く処理が重くなっているので、できるだけ再レンダリングは減らしたいです。
はじめての質問ですので、不備などあれば指摘いただけると助かります。

//react
import React, { useState } from "react";

const Counter = ({ fruitsName, count, chgCount }) => {
  return (
    <div>
      <p>
        {fruitsName}:{count}
      </p>
      <button onClick={() => chgCount(count + 1)}>+1</button>
    </div>
  );
};

const Sample = () => {
  const fruits = ["apple", "banana", "coconut", "dragonfruit"];
  const [countList, setCountList] = useState(Array(fruits.length).fill(0));
  const chgCount = (index, afterCount) => {
    let afterCountList = [...countList];
    afterCountList[index] = afterCount;
    setCountList(afterCountList);
  };
  return (
    <div>
      {fruits.map((fruitsName, i) => (
        <Counter
          fruitsName={fruitsName}
          count={countList[i]}
          chgCount={(afterCount) => chgCount(i, afterCount)}
        />
      ))}
    </div>
  );
};

export default Sample;

Comments

[hoshi-takanori]

chgCount に渡す関数が毎回作り直されてるから、かな…。

Answer 1

いくつも気になる箇所があります。

• イベント時に処理されるchgCountまわりが問題だらけです。
  • chgCountのインスタンスがレンダリングごとに変わる→useMemoを使いましょう。
  • その場で即時関数を作って渡している→インデックス処理を工夫するなどして、こんな書き方をせずに済むようにしましょう。
  • chgCount内部で現在のcountListを直接参照してしまっている→setCountList(前の値 => 新しい値)として、countListを直接参照しないようにできます。
• Counter自体にもmemoをかけましょう。