1

Right now I have a customer management app, with app state like:

    interface Customer {
      name: string,
      address: Address,
      preferences: Preferences
      ... 10 more fields ...
    }
    
    const customers: Customer[] = get500Customers()
    const store = create ((set) => ({
      customers: customers,
      setCustomers: (newCustomerList: Customer[]) => set((state) => ({ customers: newCustomerList })
    })

But I find the updates are somewhat slow to be reflected in the UI. I'm new to zustand so probably I'm not organizing this in the best way possible, so...should the above work, and is the cause of the slowness I'm seeing likely elsewhere? If not, how would you organize the above? I could imagine breaking the various fields of customer out into states themselves, so

const customerNames = {}
for (const cust of customers) {
  customerNames[cust.id] = cust.name
}
const customerStore = create ((set) => ({
  names: customerNames,
  setNames: ...
})

or, changing the state to be keyed by customer Id, and then have separate state for the list of customers, so:

const state = {}
for (const cust  of customers) {
  state[cust.id] = cust
  state[`set${cust.id}`] = ...setter...
}
const customerStore = create ((set) => (state)

but I haven't seen this sort of dynamic store creation recommended anywhere, so I'm doubtful it will work as desired.

Thoughts?

Rollie
  • 4,391
  • 3
  • 33
  • 55

0 Answers0