動的に増えるコンポーネント内で入力した値を全て親側で取得し、かつ無駄な再レンダリングをなくしたい

Question

前提・実現したいこと・現状の問題点

少々ややこしいですが、タイトル通りのことを実装したいです。

厳密に言うと、タイトルの「動的に増えるコンポーネント内で入力した値を全て親側で取得し」の部分は実装はできているのですが、下記に示すようにレンダリングに関して問題がある、という状況です。

現状のプログラムの説明
親コンポーネント内でuseStateを使って空リスト(list)を作成する
⇩
mapで回しながら、動的に追加した子コンポーネントに、Propsとしてlistを変更する関数（setItem）を渡す
⇩
子コンポーネント内にある値でlistの要素を更新する

ここで問題となっているのが、親コンポーネント内で、mapを用いてlist内の要素を子コンポーネントに渡す処理を記述しているため、memoやuseCallbackを用いても、子コンポーネントが全て再レンダリングされてしまうことです。

この問題の対処法が全く分からず、こちらで質問するに至りました。
どなたか知恵を貸していただけるとありがたいです。

質問や不十分な点があれば追記していきますので、ご指摘お願いいたします。

追記
ある程度修正したコードを下の方に追加しています。

該当のソースコード

Parent.jsx（親コンポーネント）

import { useState, useCallback } from "react";
import { Child } from "./Child";

export const Parent = () => {
  console.log("Parent");
  const [list, setList] = useState([]);

  const setItem = useCallback((idx, item) => {
    const newList = [...list];
    newList[idx] = item;
    setList(newList);
  }, []);

  const onClick = () => {
    const newList = [
      ...list,
      {
        param1: "", // この値を子コンポーネントで埋める
        param2: "" // この値を子コンポーネントで埋める
      }
    ];
    setList(newList);
  };

  return (
    <>
      {list.map((item, idx) => {
        return (
          // Parentが再描画されるたびに、すべてのChildが再描画される
          // listの最後に要素を追加したとしても、それ以前の要素も全て再描画の対象になる
          <Child key={idx} item={item} setItem={(item) => setItem(idx, item)} />
        );
      })}
      <button onClick={onClick}>追加</button>
    </>
  );
};

Child.jsx（子コンポーネント）

import React, { memo } from "react";

export const Child = memo(({ item, setItem }) => {
  const onChange1 = (e) => {
    setItem({ ...item, param1: e.target.value });
  };
  const onChange2 = (e) => {
    setItem({ ...item, param2: e.target.value });
  };

  return (
    <>
      <input value={item.param1} onChange={onChange1} />
      <input value={item.param2} onChange={onChange2} />
    </>
  );
});

追加したところ

以下が修正後のコードです。
まだ問題点があるのですが、一応、修正した箇所とその意図を説明します。

其の一

まずは、mapで回す際のkeyについては、onClick関数内で、リストに追加する要素の初期値を作成する際に、v4を用いてオブジェクトに一意の値を付与し、それをkeyとすることで対処しました。

これは動的に要素を削除することを見越して、keyにidxを設定することを避けるという意図があります。

其の二

次に、maisumakunさんにご指摘いただいたように、setItem={(item) => setItem(idx, item)}の個所で関数を再定義してしまっていたため、こちらをsetItem={setItem}に変更し、さらにidx={idx}としてpropsとして添え字を別途子側に渡すようにしました。

子側でidxをsetItemの引数に渡すことで、修正前と同様の挙動をしてくれます。

其の三

最後にsetItem関数の変更について説明します。

setItem関数は、無駄な再レンダリングを防ぐためにuseCallbackで囲っていますが、どうやら第二引数を空リストにしていると、関数定義時に参照した値が内部に保持されるらしく、そちらを改善しました（改善しきれていなかったので、下に追加で色々書いてます）。

まず上記の意味について説明します。

最初のレンダリングにてsetItemが定義されたとき、listの値は[]（空リスト）となっています。
そのため、setItem内部にある const newList = [...list]; において、listの値に[]（空リスト）が保持されたままの状態になっていました。

つまり、子側でsetItemを実行したとき、実行したタイミングでその時のlistの値を参照しに行くのではなく、最初に保持していた[]（空リスト）が使われてしまい、うまく機能しない状態だったということです（もしかしたら当たり前のことかも）。

個人的には、要素を追加するボタンを押したタイミングでlistが更新されれば十分だったため、新たにボタンを押したときに値が変更されるstateを追加し、それをuseCallbackの第二引数に指定することで、上記の問題を解決することができました（できてなかった）。

本来この文章を書いて終わりにしようと思っていたのですが、このuseCallbackの個所にまだ問題点がありました。結局、useCallback内の関数が更新される前に追加した要素すべてが、listの初期値であるを所持しており、連続で要素を追加するとおかしな挙動を取るっぽいです、、
そんなわけで、useCallback内の関数が実行されたタイミングでlistの値が更新できたらいいな、と考えています。

ちなみに、第二引数を[list]とした場合、入力中以外のinputタグまで再レンダリングされてしまったため、こちらは没にしました。

差分を掲載

Parent.jsx（親コンポーネント）

import { useState, useCallback } from "react";
import { Child } from "./Child";
+ import { v4 } from "uuid";

export const Parent = () => {
  console.log("Parent");
  const [list, setList] = useState([]);
+ const [count, setCount] = useState(0);

  const setItem = useCallback((idx, item) => {
      const newList = [...list];
      newList[idx] = item;
      setList(newList);
-   }, []);
+   }, [count]);

  const onClick = () => {
    const newList = [
      ...list,
      {
+       key: v4(),
        param1: "", // この値を子コンポーネントで埋めたい
        param2: "" // この値を子コンポーネントで埋めたい
      }
    ];
    setList(newList);
+   setCount((prevState) => prevState + 1);
  };

  return (
    <>
      {list.map((item, idx) => {
        return (
-         <Child key={idx} item={item} setItem={(item) => setItem(idx, item)} />
+         <Child
+           key={item.key}
+           item={item}
+           idx={idx}
+           setItem={setItem}
+         />
        );
      })}
      <button onClick={onClick}>追加</button>
    </>
  );
};

Child.jsx（子コンポーネント）

import React, { memo } from "react";

- export const Child = memo(({ item, setItem }) => {
+ export const Child = memo(({ item, setItem, idx }) => {
  
    // 関数の中は変更していないため省略

});

Answer 1

useReducerを用いてstateを管理するように変更することで、期待していた挙動をするようになりました。

具体的に改善できたこととしては、入力中のinputタグのみ再レンダリングを走らせて、それ以外のinputタグは自身に変更が加わるまで再レンダリングされない、という感じです。

初期のコードをがらっと書き換えたため、差分ではなくソースコードをべた張りしておきます。

maisumakunさん、最終的には自己解決に近い形になってしまいましたが、長々とお付き合いいただきありがとうございました。

修正後のソースコード

Parent.jsx

import { useCallback, useReducer } from "react";
import { v4 } from "uuid";

import { Child } from "./Child";

const initState = [];
export const ACTION_TYPE = {
  ADD: "add",
  UPDATE: "update"
};

const reducer = (state, action) => {
  switch (action.type) {
    case ACTION_TYPE.ADD:
      return [...state, action.payload];
    case ACTION_TYPE.UPDATE: {
      const newState = [...state];
      newState[action.idx] = action.payload;
      return newState;
    }
    default:
      return state;
  }
};

export const App = () => {
  const [state, dispatch] = useReducer(reducer, initState);

  const onClick = useCallback(() => {
    const newItem = {
      key: v4(),
      param1: "",
      param2: ""
    };
    dispatch({ type: ACTION_TYPE.ADD, payload: newItem });
  }, []);

  const onClickLog = useCallback(() => {
    console.log(state);
  }, [state]);

  return (
    <>
      <button onClick={onClick}>追加</button>
      <button onClick={onClickLog}>log</button>
      {state.map((item, idx) => {
        return (
          <Child key={item.key} item={item} idx={idx} dispatch={dispatch} />
        );
      })}
    </>
  );
};

Child.jsx

import React, { memo } from "react";

import { ACTION_TYPE } from "./App";

export const Child = memo(({ item, dispatch, idx }) => {
  console.log(`${idx} Child`);
  const onChange1 = (e) => {
    const payload = { ...item };
    payload.param1 = e.target.value;
    dispatch({ type: ACTION_TYPE.UPDATE, payload, idx });
  };
  const onChange2 = (e) => {
    const payload = { ...item };
    payload.param2 = e.target.value;
    dispatch({ type: ACTION_TYPE.UPDATE, payload, idx });
  };

  return (
    <>
      <input value={item.param1} onChange={onChange1} />
      <input value={item.param2} onChange={onChange2} />
    </>
  );
});

Answer 2

<Child key={v4()}としていますが、このように毎回違うkeyを与えるということは、強制的にコンポーネントの再構築を行う指示をしているのに等しい行為です。

Comments

[tksx1227]

回答ありがとうございます。

確かにフォーカスが外れるという問題は、key={v4()}と変更してから生じたものでした...

しかし、元々key={idx}としていたのですが、この場合でも無駄な再レンダリングが生じていました。
こちらの改善方法はあるのでしょうか。

（ややこしくなるのでkey={v4()}の部分は訂正させていただきます。）

[maisumakun]

setItem={(item) => setItem(idx, item)}と書いている以上、この関数はレンダリングのたびに違う関数となって、イベントハンドラの差し替えが必要となります。

（描画ごとに変化する値ではない）setItemとidxを別個に渡して子コンポーネントの内部で処理させる、あるいは(item) => setItem(idx, item)という関数をキャッシュして次の描画にも再利用する、といった工夫が必要です。

[tksx1227]

(item) => setItem(idx, item)という関数をuseCallbackで囲むことができないため、この関数が再生成されている、という認識でよろしいでしょうか。

親コンポーネント内で、setItemをuseCallbackで囲っているので大丈夫だと思っていたのですが、上の関数は、setItemとは別の関数だから関係ないということで合っていますか。

[maisumakun]

どちらも正しいです。setItemがuseMemoされていようが、(item) => setItem(idx, item)は生成のたびに別なインスタンスとなります。

[tksx1227]

なるほど、大分問題点が明確になった気がします。

とりあえず上記を参考にしてコードを修正してみますね。

[maisumakun]

> ちなみに、第二引数を[list]とした場合、入力中以外のinputタグまで再レンダリングされてしまったため、こちらは没にしました。

その程度の更新は「気にしない」という選択肢もありです。

[tksx1227]

「気にしない」という選択肢は考えていなかったですね、、

実際に作っているプログラムでは、追加ボタンを押すたびに4つで1セットの入力欄が増えるのですが、さほど気にしなくても差し支えないということでしょうか。

実際、入力のたびにすべての子コンポーネントが再レンダリングされると、最初は4つ、1つ追加すると8つ、さらにもう1つ追加すると12、、、と1文字入力するごとに4の倍数個分のinputタグが再レンダリングされることになると思うのですが、これだと厳しいですかね。

当方、Reactを学び始めてまだ日が浅いということもあり、いまいち最適化の加減が分かっておらず、長々と思考を巡らせてしまっています、、

[maisumakun]

> 1文字入力するごとに4の倍数個分のinputタグが再レンダリングされることになると思うのですが、これだと厳しいですかね。

よっぽどリアルタイム性が求められる、あるいはもっと多くない限り、じゅうぶん実用的な性能は出ます。

[maisumakun]

ゲームなどリアルタイム性が肝になるようなプロダクトでないなら、最適化は速度が問題になってから考える、でもとりあえずは間に合います。

[tksx1227]

>よっぽどリアルタイム性が求められる、あるいはもっと多くない限り、じゅうぶん実用的な性能は出ます。
上記のセットは最大で100個まで追加できるようにする予定です。

つまり、一文字入力するごとに最大400個のinputタグが再レンダリングされるということになります。

この場合は”もっと多くない限り”に該当するのでしょうか。

[maisumakun]

気になるなら、実際に実装してどの程度の性能が得られるか確認してみましょう。

[tksx1227]

50個近く生成した段階で、かなり重くなってしまい使い物にならなさそうです、、

[maisumakun]

ブラウザにReact Developer Toolsを入れてみて、どこがどれだけ更新されていて、それがどれだけの時間がかかっているのか検証してみましょう。他の箇所・値が原因ということも考えられます。

[maisumakun]

「既存のstateをもとにして新たなstateを作る」ような操作を行う場合、setStateに「前のstateを受け取って新しいstateを返す関数」を渡す形とすれば、前のstateでメモ化する必要がなくなることがあります。

[tksx1227]

useReducerでstateを管理する方向に切り替えるとうまくいきそうなので、こちらを先に試してみます。

[tksx1227]

結果的にuseReducerでうまくいったので、一応、自己解決として処理しておきました。

上の方でも書かせていただきましたが、maisumakunさん、長々とお付き合いいただきありがとうございました。