85280


React/Next.jsで描画している配列に要素をただ追加(push)しても、描画が更新されないという問題があり、これ自体は[useStateで配列を更新する](https://zenn.dev/gunners6518/articles/4c06488cfa402e)をみて、useStateを使って、再度インスタンス化のようなことをすれば解決できるとのことなのですが、これはパフォーマンス的には、よいものなのでしょうか？

追加(push)した際に、すべての要素が再描画されてしまう気がします。

他によい方法はないでしょうか？

ReactもNext.jsもよくわかっていないので、基本的な理解ができていない可能性があります。

[code]

    const Account: NextPage = () => {
      const initialUsers: User[] = [];
      const [users, setUsers] = useState(initialUsers);
    
      function addUser(name: string) {
        const newUser = new User(name);
        setUsers([...users, newUser]);
        //users.push(newUser); // pushでは再描画されない
      }
    
      return (
        <div>
          <button onClick={() => addUser("New Name")}>Add User</button>
          <ul>
            {
              users.map((user) => (
                <li key={user.id}>{user.name}</li>
              ))
            }
          </ul>
        </div>
      );
    }
    
[/code]


CC BY-SA 4.0
2021-12-22T00:40:07.777
85263
2021-12-22T13:45:26.430
2021-12-22T13:36:14.693
754
40856
question
reactjs next.js
React/Next.jsで描画している配列に要素を追加するために、再度インスタンス化(useState)した際のパフォーマンスについて


setUsers が呼ばれると、 react のフレームワークは、この `Account` 関数を再度計算しなおして、それによって得られる element
オブジェクトに対して、今度は reconsilation によって既存の dom
と差分を検出し、その差分のみを更新する、、みたいなことをやるんだったんじゃないか、と思っています。

なので、この `Account` が表す dom の部分木全体が更新されるのではなく、あくまでその差分が更新されるんじゃないか、という気がします。


CC BY-SA 4.0
2021-12-22T13:45:26.430
85280
2021-12-22T13:45:26.430
754
85263
answer