Reactでインプット要素を持つ 大量のリストがあった時の再レンダリング防止策について

Question

前提・実現したいこと

インプット要素を持つ 大量のリストがあり、こちらの入力を行うと入力をしたインプット要素だけでなく、他の入力を行っていないインプット要素も再レンダリングをされてしまう状態です。
こちらをどうにか入力を行ったインプット要素だけを再レンダリングさせるようにできないかな？と考えているのですが、いい方法はないでしょうか？
なお、親のコンポーネントのインプット要素を入力を行った時の再レンダリング対策はReact.memoやuseCallbackで対応済みです。

参考画像

参考MOVIE

https://gyazo.com/a8ba2cd0e58e98c305f0fcb76d5a2472

該当のソースコード

// Page.tsx
import React, { useCallback, useEffect, useState } from 'react';

import { Users } from '@/components/organisms/Users';

import { PageLayout } from '../templates';

type User = {
  id: number;
  name: string;
  inputName: string;
};

const Page: React.FC = () => {
  const sampleUsers = [...Array(100)].map((index) => ({
    id: index + 1,
    name: `name${index + 1}`,
    inputName: '',
  }));

  const [input, setInput] = useState<string>('');
  const [users, setUsers] = useState<User[]>([]);

  const handleInput = useCallback(
    (newInput: string, index: number) => {
      const copyusers = [...users];
      copyusers[index].inputName = newInput;
      setUsers(copyusers);
    },
    [users]
  );

  useEffect(() => {
    setUsers(sampleUsers);
  }, []);

  return (
    <PageLayout>
      親のインプット
      <input
        type="text"
        style={{
          border: '1px solid black',
        }}
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
      <Users {...{ users, handleInput }} />
    </PageLayout>
  );
};

export default Page;

// Users.tsx
import React from 'react';

import { User } from '@/components/organisms/User';

type User = {
  id: number;
  name: string;
  inputName: string;
};

type UsersProps = {
  users: User[];
  handleInput: (newInput: string, index: number) => void;
};

export const Users: React.FC<UsersProps> = React.memo(
  ({ users, handleInput }): JSX.Element => {
    console.log('ここはUsersです');
    return (
      <ul style={{ marginTop: '100px' }}>
        {users.map((user, index) => {
          return <User key={index} {...{ index, handleInput, user }} />;
        })}
      </ul>
    );
  }
);

Users.displayName = 'UsersComponent';

// User.tsx
import React from 'react';

type User = {
  id: number;
  name: string;
  inputName: string;
};

type Props = {
  user: User;
  index: number;
  handleInput: (newInput: string, index: number) => void;
};
export const User: React.FC<Props> = React.memo(
  ({ user, index, handleInput }): JSX.Element => {
    console.log('ここはuserのindexは', index);

    return (
      <li key={user.id}>
        Userコンポーネント
        <input
          style={{
            margin: '10px',
            border: '1px solid black',
          }}
          type="text"
          onChange={(e) => {
            handleInput(e.target.value, index);
          }}
          value={user.inputName}
        />
        inputName:{user.inputName}
      </li>
    );
  },
  (prevProps: Props, nextProps: Props) => {
    const prevInputName = prevProps.user;
    const nextInputName = nextProps.user;
    // ここで前の状態で比較をしても変わっていない状態になってしまう。。
    return prevInputName === nextInputName;
  }
);

User.displayName = 'UserComponent';

試したこと

User.tsxの中にinput要素があり、ここでReact.memoの第二引数を使って前のPropsの状態と今のPropsの状態を比較できると調べて、それを実施してみたが、うまく動作をしなくなってしまう状態です（こちらの第二引数をなくせば動きます）

補足情報（FW/ツールのバージョンなど）

"react": "^17.0.1"
"typescript": "^4.0.3"

Answer 1

メモ化が効果を発揮するしない以前の問題として、useMemoをmapのループの中に入れてはいけません。

Hooksは描画のたびに同じ回数だけ呼び出さないといけないので、usersの個数が変わればエラーとなってしまいます（おまけに、「userが変わればメモ化を破棄する」という性質上、メモ化の効果もゼロどころか、むしろ悪影響していることすら考えられます）。

Comments

[maisumakun]

あと、handleInputが外からusersを取る構造も妥当ではありません（usersが変化するたびにhandleInputも変化して、メモ化が無意味となります）。

setUsersに関数を渡すと、その引数として元の値が来ますので、そちらを使いましょう。外側のusersを参照しなければ、handleInputのインスタンスも同じままにできます。

[keisei-001]

@maisumakun
色々と見ていただきありがとうございます。

> メモ化が効果を発揮するしない以前の問題として、useMemoをmapのループの中に入れてはいけません。
ご指摘ありがとうございます。こちら検証で仕込んでいたものの削除忘れでしたので編集し修正いたしました。

> usersが変化するたびにhandleInputも変化して、メモ化が無意味となります）。
こちら私の不勉強で申し訳ないのですが、useCallbackで第二引数にusersを渡しており、usersが変更されたときhandleInputは再生成される（されるべき？）なのかなと思っていたのですが、こちらについては誤った認識でしたでしょうか？

> setUsersに関数を渡すと、その引数として元の値が来ますので、そちらを使いましょう。外側のusersを参照しなければ、handleInputのインスタンスも同じままにできます。

こちらについてもご指摘いただきありがとうございます。
下記のような形で修正を行っているのですが、イメージあっていますでしょうか？

```
const handleInput = useCallback(
(newInput: string, index: number) => {
setUsers((prevUsers) => {
const copyUsers = [...prevUsers];
copyUsers[index].inputName = newInput;
return copyUsers;
});
},
[users] // ここの依存関係がないと動作しなくなる
);
```

[maisumakun]

> usersが変更されたときhandleInputは再生成される（されるべき？）なのかなと思っていたのですが、こちらについては誤った認識でしたでしょうか？

はい、子コンポーネントを再描画したくないのなら、usersの再作成＝「1つでも要素が書き換われば全部」再描画、というのは求めるものではないですよね？

> 下記のような形で修正を行っているのですが

依存関係の[users]は外して空配列にしてください。

[keisei-001]

> はい、子コンポーネントを再描画したくないのなら、usersの再作成＝「1つでも要素が書き換われば全部」再描画、というのは求めるものではないですよね？

そうですね。。おっしゃる通りでした。

なお、依存配列を空配列にすると各インプット要素自体が動作をしなくなってしまうようです。。

[maisumakun]

あとは、Userコンポーネントmemo時の比較関数を外してみてはどうでしょうか？

[keisei-001]

たびたびありがとうございます。
比較関数自体もはずしたんですが依存配列にusersはないとやはりダメのようです。
今外出してしまっており、動作検証が出来ないのですが、また帰宅後に調査してみます。

[keisei-001]

inputのある列でそれぞれの更新されていないuser.tsxを更新させないようにしたいが、元のusersのstateが更新されるから再レンダリングは避けられないという気がしてきました。

[maisumakun]

> 元のusersのstateが更新されるから再レンダリングは避けられないという気がしてきました。

そんなことはないです。変更されていないUserに渡す値は同じインスタンスを継続することが可能です。

[maisumakun]

> なお、依存配列を空配列にすると各インプット要素自体が動作をしなくなってしまうようです。。

別の問題があってここでトラブっているような印象を受けます。

[keisei-001]

> そんなことはないです。変更されていないUserに渡す値は同じインスタンスを継続することが可能です。
なるほど、ちょっとこのあたり理解ができていないので改めて学習いたします。

> 別の問題があってここでトラブっているような印象を受けます。

更新されていない原因と言っていいかわかりませんが、User.tsxのReact.memoを外すことで、handleInputの依存配列を空配列にして更新はできました。ただ、再レンダリングは未だに起きているようです。
またReact.memoを外すとUser.tsxが以前の状態を認識できずに再レンダリングを防ぐのは難しそうだと思いました。なので対応方法が良くなかったかもしれないです。

[maisumakun]

sampleUsersもインスタンスが変化するので、そのあたりでなにか変な挙動になっていることも考えられます。

初期値はuseEffectでのセットではなく、useStateの引数として与えましょう（関数にすれば最初1回しか呼ばれないです）。