Zustand vs Jotai Comparación

// store.ts
import { create } from 'zustand'
import { persist } from 'zustand/middleware'

interface CartState {
  items: CartItem[]
  addItem: (item: CartItem) => void
  total: () => number
}

export const useCartStore = create<CartState>()(
  persist(
    (set, get) => ({
      items: [],
      addItem: (item) =>
        set((state) => ({ items: [...state.items, item] })),
      total: () => get().items.reduce((sum, i) => sum + i.price, 0),
    }),
    { name: 'cart-storage' }
  )
)

// componente
function Cart() {
  const { items, total } = useCartStore()
  return <p>Total: {total()}</p>
}

// atoms.ts
import { atom } from 'jotai'
import { atomWithStorage } from 'jotai/utils'

export const cartItemsAtom = atomWithStorage<CartItem[]>('cart', [])

export const cartTotalAtom = atom((get) =>
  get(cartItemsAtom).reduce((sum, i) => sum + i.price, 0)
)

// componente
import { useAtom, useAtomValue } from 'jotai'

function Cart() {
  const [items, setItems] = useAtom(cartItemsAtom)
  const total = useAtomValue(cartTotalAtom)
  return <p>Total: {total}</p>
}