Replace zustand with valtio for state management#140
Merged
Conversation
There was a problem hiding this comment.
Pull request overview
Replaces Zustand-based stores with Valtio proxies (plus a custom AsyncStorage persistence helper), and shifts several “list” stores to DB-reactive queries via useDbQuery. Also refactors track recording/distance computation and updates tests/docs to match the new state model.
Changes:
- Migrate app state from Zustand to Valtio (
xyzStateproxies +useXyz()snapshot hooks), including persistence viapersistProxy. - Move DB-backed lists (tracks/markers/routes) to reactive SQL queries (
useDbQuery) and add SQL-level sorting (including “nearby”). - Rework track recording distance logic (new
tracks/distancealgorithm + tests) and update overlays/UI to consume the new APIs.
Reviewed changes
Copilot reviewed 82 out of 83 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| tests/tracks/distance.test.ts | Adds deterministic tests for new distance algorithm |
| tests/navigation/hooks/useNavigation.test.ts | Updates navigation tests for Valtio proxy state |
| tests/navigation/components/SpeedOverGround.test.tsx | Updates HUD tests to mutate proxy states/reset helpers |
| tests/navigation/components/NavigationHUD.test.tsx | Updates NavigationHUD tests for new stores |
| tests/navigation/components/HeadsUpDisplay.test.tsx | Updates HeadsUpDisplay tests for new stores |
| tests/map/hooks/useCameraView.test.ts | Updates camera view tests for proxy state |
| tests/map/hooks/useCameraState.test.ts | Updates camera state/position tests for proxy state |
| tests/map/components/FollowLocationButton.test.tsx | Updates follow-location button tests for proxy state |
| tests/instruments/signalk.test.ts | Updates AIS/AtoN store tests to new APIs |
| tests/instruments/nmea-tcp.test.ts | Updates AIS store usage in NMEA TCP tests |
| tests/hooks/usePreferredUnits.test.ts | Updates preferred-units tests for proxy + reset |
| tests/aton/hooks/useAtoN.test.ts | Updates AtoN tests for proxy state + clear |
| tests/ais/hooks/useAIS.test.ts | Updates AIS tests for proxy state + clear |
| src/tracks/hooks/useTracks.ts | Converts tracks to DB-reactive queries + adds hooks for track/points |
| src/tracks/hooks/useTrackRecording.tsx | Rebuilds track recording store, persistence, and point streaming |
| src/tracks/distance.ts | Introduces canonical segment/track distance computation |
| src/tracks/components/TrackRecordingStats.tsx | Uses useElapsedMs + new recording snapshot shape |
| src/tracks/components/TrackOverlay.tsx | Uses useTrackRecordingPoints and updated sheet state API |
| src/tracks/components/TrackDetail.tsx | Uses reactive useTrack / useTrackPoints instead of manual fetching |
| src/routes/hooks/useRoutes.ts | Migrates active-route store to Valtio + persistence + mutators |
| src/routes/components/WaypointBadge.tsx | Accepts readonly points list |
| src/routes/components/RouteOverlay.tsx | Updates active-route consumption + navigation position hook |
| src/routes/components/RouteEditor.tsx | Updates editor to new active-route + navigation state APIs |
| src/routes/components/RouteButton.tsx | Updates active-route detection via computed flags |
| src/persistProxy.ts | Adds Valtio ↔ AsyncStorage persistence helper |
| src/navigation/hooks/useNavigationState.tsx | Removes legacy navigation zustand store |
| src/navigation/hooks/useNavigation.ts | Rebuilds navigation state as Valtio + expo-location watcher |
| src/navigation/components/NavigationHUD.tsx | Uses snapshot destructuring instead of selectors |
| src/navigation/components/NavigationCamera.tsx | Replaces zustand subscriptions with valtio subscribe/subscribeKey |
| src/markers/hooks/useMarkers.ts | Converts markers to DB-reactive queries + adds useMarker |
| src/markers/components/MarkerOverlay.tsx | Uses useMarkers() + bounds helper for visibility filtering |
| src/markers/components/MarkerDetail.tsx | Switches to useMarker(id) |
| src/map/hooks/useSheetPosition.ts | Replaces sheet store with Valtio proxy + subscribe |
| src/map/hooks/useCameraView.ts | Replaces camera view store with Valtio proxy |
| src/map/hooks/useCameraState.tsx | Replaces camera state store + persistence via persistProxy |
| src/map/hooks/useCameraPosition.ts | Replaces camera position store + persistence via persistProxy |
| src/map/components/SheetBottomToolbar.tsx | Uses new getTopSheetHeight() defaulting to global proxy |
| src/map/components/FollowLocationButton.tsx | Uses snapshot destructuring |
| src/map/components/Compass.tsx | Uses snapshot destructuring |
| src/map/components/ChartView.tsx | Uses cameraPositionState for imperative zoom reads |
| src/instruments/hooks/useConnections.ts | Migrates connections store to Valtio + persistence |
| src/hooks/usePreferredUnits.tsx | Migrates preferred units store to Valtio + persistence |
| src/hooks/useElapsedMs.ts | Adds shared ticking elapsed-time hook |
| src/geo.ts | Makes route point inputs readonly; adds buffered bounds helper |
| src/format.ts | Adds formatElapsedMs; broadens elapsed formatter input types |
| src/database.ts | Adds “nearby” ordering for markers/tracks; returns TrackPoint on insert |
| src/charts/theme.ts | Migrates theme preference store to Valtio + persistence |
| src/charts/store.ts | Migrates chart store to Valtio + persistence + hydrate init |
| src/charts/hooks/useOfflineSettings.ts | Migrates offline settings store to Valtio + hydrate side effects |
| src/charts/hooks/useOfflinePacks.ts | Migrates ephemeral packs store to Valtio |
| src/charts/hooks/useDownloads.ts | Migrates ephemeral downloads store to Valtio |
| src/charts/hooks/useDownloadOverlay.ts | Migrates overlay visibility store to Valtio |
| src/charts/hooks/useCharts.ts | Updates chart hooks to new snapshot access patterns |
| src/charts/hooks/useChartCatalog.ts | Updates catalog hook to new chart store snapshot |
| src/charts/components/OfflineStatusButton.tsx | Updates to new store snapshots |
| src/charts/components/DownloadRegionOverlay.tsx | Updates to new store snapshots |
| src/charts/components/ChartPreview.tsx | Uses cameraViewState for non-reactive bounds access |
| src/aton/hooks/useAtoN.ts | Migrates AtoN store to Valtio proxy |
| src/aton/components/AtoNLayer.tsx | Uses new useAtoN() return value |
| src/app/tracks/index.tsx | Moves track sorting to SQL + uses getPosition() anchor |
| src/app/settings.tsx | Uses snapshot destructuring for settings |
| src/app/routes/index.tsx | Updates active-route usage with computed flags |
| src/app/route/new.tsx | Uses getPosition() and updates waypoint seeding |
| src/app/route/[id].tsx | Uses useRoute() snapshot and readonly-safe bounds handling |
| src/app/offline/index.tsx | Uses new offline stores; minor refactors |
| src/app/markers/index.tsx | Moves marker sorting to SQL + nearby anchor logic |
| src/app/marker/edit.tsx | Uses useMarker(id) |
| src/app/index.tsx | Updates activity detection to computed flags |
| src/app/connections.tsx | Uses useConnections() snapshot destructuring |
| src/app/connection/[id].tsx | Updates AIS selector usage for new store |
| src/app/charts/index.tsx | Uses chart store snapshot destructuring |
| src/app/charts/[id]/offline.tsx | Uses downloads snapshot destructuring |
| src/app/charts/[id]/download.tsx | Clones readonly bounds for MapLibre API consumption |
| src/app/activity.tsx | Uses new navigation + recording store APIs |
| src/ais/hooks/useAIS.ts | Migrates AIS store to Valtio proxy + buffered flush |
| src/ais/components/AISLayer.tsx | Uses new useAIS() return value |
| patches/valtio+2.3.1.patch | Applies Hermes-related patch to Valtio snapshot creation |
| package.json | Replaces Zustand dependency with Valtio |
| package-lock.json | Locks Valtio + proxy-compare; removes Zustand |
| docs/roadmap.md | Removes in-repo roadmap document |
| docs/README.md | Points roadmap link to GitHub Project |
| README.md | Points roadmap link to GitHub Project |
| CONTRIBUTING.md | Updates documented conventions to Valtio + persistProxy/useDbQuery |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Zustand was geting more and more awkward as the app grew. What started as trying to track down a bug in track recording ended with completely rewriting the state management. Valtio is way simpler to use
The one drawback is that there is currently a bug with React Native / Hermes, but I've included a patch for it.
pmndrs/valtio#1220