How Discord Achieves Native iOS Performance with React Native
Article Summary
Discord runs millions of MAU on iOS with just 3 core engineers. Their secret? React Native—but only after a brutal performance overhaul.
When Discord's iOS app became nearly unusable on iPhone 6s despite once running smoothly on iPhone 5s, they formed a mobile performance squad. This deep-dive chronicles their systematic hunt through Flux stores, React components, main thread bottlenecks, gestures, and bundle loading.
Key Takeaways
- Cut message parsing from 1000ms to 90ms by fixing regex compilation in JSC
- Replaced FlatList with custom FastList, saving 70-90ms render time
- Fixed UIImage loading bug that caused 50ms delays per image load
- RAM bundles and lazy loading dropped TTI by 3500ms on iPhone 6
- Rewrote navigation drawers with react-native-reanimated for buttery smooth gestures
Through five optimization phases, Discord achieved consistent 60 FPS, slashed battery drain, and cut initial load time by over 2 seconds while maintaining their React Native foundation.
About This Article
Discord's Flux store was eating up CPU cycles. User store updates took 30ms per emit, while message loading and caching actions hit 500ms on iPhone XS and 1000ms on iPhone 6s. The battery drain was real, even though frame rates stayed intact.
Miguel Gaeta's team moved user store listeners from top-level components down to the child components that actually needed them. They also swapped out the inline-compiled Unicode emoji regex for a pre-computed range regex that performed better on JSC.
Message parsing got 90% faster, dropping from 1000ms to 30ms on iPhone 6s. That cut nearly a second off time-to-interactive and reduced CPU and battery usage across all devices they supported.