Summary
Our reliance on the React Context API for global state management (merchant configuration, exchange rates, transaction queues) is causing severe performance degradation. Updating a single property in the global context forces a re-render of the entire application tree, which is highly noticeable on cheap Android devices.
We need to rip out the Context API and migrate to zustand. Zustand will allow us to define atomic state slices and bind components to specifically subscribe only to the exact properties they need. This architectural shift will drastically reduce the render cycle footprint and make the state significantly easier to test and mutate.
Acceptance Criteria
Tech Stack
Next.js 14, React, Zustand.
Summary
Our reliance on the React Context API for global state management (merchant configuration, exchange rates, transaction queues) is causing severe performance degradation. Updating a single property in the global context forces a re-render of the entire application tree, which is highly noticeable on cheap Android devices.
We need to rip out the Context API and migrate to
zustand. Zustand will allow us to define atomic state slices and bind components to specifically subscribe only to the exact properties they need. This architectural shift will drastically reduce the render cycle footprint and make the state significantly easier to test and mutate.Acceptance Criteria
zustandand design store slices forsettings,rates, andqueue._app.tsx/layout.tsx.Tech Stack
Next.js 14, React, Zustand.