The todo example doesn't pass the render efficiency test

[tylerlong]

Bug Description

Please check the test report: https://github.com/tylerlong/todo-render-efficiency/tree/valtio

I copied the code from here https://github.com/pmndrs/valtio/tree/main/examples/todo

I applied React.memo to TodoRow to reduce the number or re-renders.

There is still one test case failed. Please help, thanks.

Reproduction Link

https://github.com/tylerlong/todo-render-efficiency/tree/valtio

[dai-shi]

It's probably because you pass the entire todo object to TodoRow. Try something like this:

<TodoRow key={todo.id} todoId={todo.id} />

[dai-shi]

Maybe passing index instead of id would make more sense because you can do todos[index].

[tylerlong]

Passing index will cause other render efficiency issues. For example, removing a todo may cause other todos to re-render because their indexes changed.
We could tell React.memo to ignore the index prop. But I am not sure that regular developers would do that.
I hope this library could address this render efficiency issue instead. So that no special code is required to achieve render efficiency.

[dai-shi]

I thought about it years ago, and I don't think it's possible for a library to do anything. We have a similar case with Jotai too.

It will cause performance issue if there are lots of todos.

If .find causes a real performance issue, you would need a map, like todoMap[id].

[tylerlong]

According to this test result, Mobx, Jotai and Manate don't have this issue. Zustand and Valtio have this issue.

[dai-shi]

Ah, yeah, Jotai can pass the atom as reference. (I was confused with another case (= omitting React.memo))
To do the same, actually, you can pass todo proxy not snapshot.

function useTodos() {
  const snapShot = useSnapshot(store)

  switch (snapShot.filter) {
    case 'all':
      return [snapShot.todos, store.todos]
    case 'completed':
      return [snapShot.todos.filter((todo) => todo.completed), store.todos.filter((todo) => todo.completed)]
    default:
      throw Error('Error: un supported filter')
  }
}

function TodoList() {
  console.log("TodoList render");
  const [todos, storeTodos] = useTodos();
  return (
    <div>
      {todos.map((todo, index) => (
        <TodoRow key={todo.id} todo={storeTodos[index]} />
      ))}
    </div>
  );
}