Skip to content

refactor(state): migrate global context to Zustand architecture #25

Description

@0dillon

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

  • Install zustand and design store slices for settings, rates, and queue.
  • Refactor all components to consume state via Zustand hooks.
  • Rip out the existing Context Providers from _app.tsx/layout.tsx.
  • Assert that component re-renders are minimized using React DevTools profiler.

Tech Stack

Next.js 14, React, Zustand.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions