Нормализация состояния в React через реестр сущностей: паттерн на Zustand с рекурсивным парсингом и мягкими удалениями

[markelov69]

Как бы MobX уже 10 лет назад решил все эти нюансы и проблемы и прекрасно их решает по сей день.

[nihil-pro]

[js2me]

Причём как правило достаточно использовать observer и computed.

И никаких useShallow :)

[nihil-pro]

Какая дичь. Что только не придумывают, лишь бы не признавать свое помешательство на иммутабельности.

[js2me]

Тот же пример на "всеми" нелюбимом стейт менеджере...

const UserList = observer(({ userIds }: { userIds: UserId[] }) => {
  const users = userIds
    .map((id) => userStore.users[id])
    .filter(Boolean); 

  return (
    <ul>
      {users.map((u) => (
        <li key={u.id}>{u.fullName}</li>
      ))}
    </ul>
  );
});

[DmitryKazakov8]

Entity Registry — плоский реестр сущностей, который ... обеспечивает точечный ре-рендер только тех компонентов, чьи данные действительно изменились

Судя по задаче - нужно было оптимизировать ререндер, а нормализация в маппер по id - это лишь способ решения для иммутабельных подходов. С Mobx это вообще излишне - можно класть в стор сырой ответ от апи и напрямую его перебирать вообще без "слоев нормализации".

const UserList = observer(({ userIds }: { userIds: Set<UserId> }) => {
  const filteredUsers = userStore.usersDTO
    .filter(({ id }) => userIds.has(id)); 

  return (
    <ul>
      {filteredUsers.map((user) => <UserItem key={user.id} user={user} />)}
    </ul>
  );
});

Тут UserItem обновится точечно при изменении данных конкретного пользователя, и можно напрямую мутировать сущности (но лучше конечно через персистентное хранилище в виде БД бэка или LS, зависит от требований к функционалу).