Supercharging Discord Mobile: Our Journey to a Faster App (opens in new tab)
Discord’s mobile performance work focuses on making power-user workflows faster and more reliable, especially on lower-end Android devices. The team improved memory usage and frame rates through virtualization, native UI optimizations, recycling, and better media formats. When React Native could not meet performance needs, Discord chose targeted native implementations despite the added maintenance burden. ## React Native and Performance Priorities - Discord uses React for desktop and React Native for mobile. - Android moved to React Native in 2022 after improvements in device capabilities and the Hermes JavaScript engine. - The transition initially affected startup performance, but median startup times were cut in half during 2023. - Recent work targets heavily used features and users with large servers, busy chats, and extensive emoji collections. ## Virtualized Server List - The old server list kept every server view and icon—including animated icons—in memory. - The rewritten virtualized list retains only information for servers currently visible on screen. - The change also enabled improved drag-and-drop animations. - Users with more than 100 servers saw: - 14% lower startup memory usage - 10% faster overall startup time ## Native Chat Performance Improvements - Discord profiled its already-native chat list and found opportunities to improve loading, scrolling, and memory use. - Application Components and Media Mosaics now use recycling mechanisms. - Infrequently used elements, including spoilers and upload overlays, are loaded lazily. - Message containers and reactions were made faster to measure. - Recycling pools are pre-filled with common chat elements before a chat is opened. - Results included up to 60% fewer slow frames and approximately 12% lower chat-list memory usage. ## Rebuilding the Android Emoji Picker - Large servers can provide hundreds of custom emojis, many of them animated. - The previous React Native picker produced blank frames—and sometimes crashes—on budget Android devices during rapid scrolling. - Discord rebuilt the picker natively for Android rather than applying incremental optimizations. - Stress tests involving emojis from 200 servers eliminated blank frames and delivered smooth scrolling on low-end hardware. - Discord accepted the cost of maintaining separate Android and iOS implementations, while planning to reassess the decision with React Native’s New Architecture. ## Animated WebP Emojis - Discord’s media proxy added animated WebP support. - Replacing GIFs with WebP enabled animated emojis to render at up to 60 frames per second on low-end devices. - The team plans to publish more details about its animated-image improvements. ## Eliminating ChannelList Blanking - Discord initially replaced its homegrown React Native FastList with Shopify’s FlashList. - FlashList simplified development because components did not require precisely accurate dimensions. - In practice, FlashList blanked more frequently on low-end Android devices. - Discord restored and refactored FastList, eliminating blanking even on a $50 phone. Discord’s approach combines broad React Native development with native solutions where performance is critical. Virtualization, recycling, lazy loading, and efficient image formats provide general improvements, while platform-specific rewrites remain justified for demanding experiences such as emoji browsing.