Performance Engineering: Optimizing for the Next Billion Users
David Kim, Senior Engineer
CashFlow Team
Tech Stack Highlights
- Framework: React Native (New Architecture)
- Storage: WatermelonDB (JSI-based SQLite)
- Lists: Shopify FlashList (Recycling Views)
- Animations: Reanimated 3 (Worklet driven)
Performance is often treated as a luxury feature. At CashFlow, we treat performance as a constraint. If the app drops frames on a $100 Android device, the feature is not ready to ship.
The Psychology of Latency
Financial anxiety is real. When a user inputs a transaction, they want immediate confirmation. A delay of even 200ms introduces subconscious doubt.
To combat this, we utilize a pattern known as Optimistic UI Updates:
"The interface should move at the speed of thought, not the speed of I/O."
FlashList & JSI
Rendering long lists is the bottleneck of most finance apps. We tackled this with two major optimizations:
-
Migrating to FlashList: Unlike the standard
FlatListwhich creates a new view for every item, FlashList recycles views (similar to Android'sRecyclerView). This allows steady memory usage even with 10,000 transactions. - JSI (JavaScript Interface) Binding: Our database layer communicates directly with the C++ core, bypassing the slow React Native Bridge. This reduces serialization overhead to near zero.
Conclusion
Building for the next billion users means building for constrained environments. By optimizing for the lowest common denominator, we ensure that CashFlow provides a premium experience for everyone.
Subscribe to our newsletter
Get the latest updates on engineering, finance, and privacy delivered to your inbox.