⚛️ Атомарные обновления в Zustand

Я уже упоминал атомарные обновления, когда говорил о проблемах контекста реакта.

Я называю обновления атомарными, если компонент обновляется только тогда, когда изменяются данные, которые он использует. У контекста реакта с этим большие проблемы, но и при использовании Zustand можно выстрелить себе в ногу.

Zustand сравнивает по ссылке предыдущее и текущее значение, возвращаемое из useStore(), и если объект изменился — происходит ре-рендер. 

❌ В следующем примере у нас всегда будет возвращаться новый объект, и ре-рендер произойдёт даже если изменился только age, а lastName и firstName не изменились

const {firstName, lastName} = useStore(({firstName, lastName}) => ({firstName, lastName}));

Аналогичное поведение будет и в следующем случае

const {firstName, lastName} = useStore();


✅ Есть три варианта использования значений из стейта, которые поддерживают атомарные обновления:

1️⃣ Одиночные селекторы

const firstName = useStore((state) => state.firstName)

const lastName = useStore((state) => state.lastName)

2️⃣ Селектор, который возвращает объект + shallow - функция сравнения предыдущего и нового стейтов

const {firstName, lastName} = useStore(({firstName, lastName}) => ({

    firstName, 

    lastName

}), shallow);

3️⃣ Автосгенерированных селекторы

const firstName = useStore.use.firstName();

const lastName = useStore.use.lastName();

Накидал небольшую демку в Codesandbox

#frontend #react #statemanagement #zustand