React Native

Improving Chat Performance and Creating a Custom UI Library

We enhanced the performance of the Dream11 platform by optimizing chat functionality for low- and medium-end devices, and creating a custom UI component library.

78%
bundle size reduction (from 50 MB to 11 MB)
Dream11 is the world’s largest fantasy sports platform, with over 120 million users.
Industry
Fantasy Sports
Date
2024
Size
Enterprise
//
Challenge

Preparing for high traffic at scale

With a major cricket tournament approaching, Dream11 needed to ensure a smooth user experience under high traffic conditions. The priority was to optimize performance quickly, especially within the in-app chat feature, to reduce the risk of user churn and protect brand reputation. At the same time, they wanted to future-proof development by introducing a scalable design system that their internal team could maintain and extend with minimal effort.

Our collaboration focused on two core objectives: improving chat performance under load, and creating a flexible design system based on React Native Paper to accelerate future development.

//
Numbers

Faster chat, lower churn, and a scalable UI foundation

78%
bundle size reduction (from 50 MB to 11 MB)
30%
faster component mount time after render optimization
60%
faster initial load time enabled by switching to Hermes
//
Our Work

Optimizing chat for scale and building a design system from the ground up

Our engagement focused on two parallel tracks: optimizing chat performance ahead of peak user traffic, and building a custom UI component library to support long-term scalability.

Chat Optimization Workflow

We began by cleaning up the chat codebase, removing React Native anti-patterns, misused libraries, and incorrect component usage. To guide the optimization process, we applied the DMAIC cycle, starting with issue identification and measurement, followed by targeted code improvements and validation using internal performance tooling.

Throughout the process, we worked closely with Dream11 to prioritize changes that would deliver the highest impact under expected user load conditions.

UI Component Library Setup

To support long-term maintainability, we built a custom UI component library based on a fork of React Native Paper. The process included:

  • Reviewing Figma mockups and acceptance criteria with Dream11
  • Setting up the design system foundation: colors, typography, and layout
  • Establishing CI workflows for automated updates
  • Integrating Storybook for component testing

We then implemented a full set of reusable components, ensuring alignment with both design specs and technical standards.

//
Results

Smoother experience for users on low-end Android devices

Dream11 now operates with a more stable and performant app, especially in high-traffic scenarios. The chat feature delivers a smoother experience for users on low-end Android devices, addressing a key area of user friction and directly supporting business goals like reducing churn and improving user retention.

In parallel, the new UI component library enables Dream11’s in-house team to ship new features more efficiently. By standardizing design elements and behavior across the app, the solution reduces development time and ensures a more consistent user experience, all while lowering the long-term cost of maintenance and iteration.

//
testimonial

Preparing for high traffic at scale

 at 
//
services

Expertise we brought to this project

That’s how we made this project successful. Learn more about each service and how it can support your team.

React Native Performance Optimization

Improve React Native apps speed and efficiency through targeted performance enhancements.

React Native Development

Hire expert React Native engineers to build, scale, or improve your app, from day one to production.

Mobile App Development

Launch on both Android and iOS with single codebase, keeping high-performance and platform-specific UX.

//
our work

How we’ve solved similar challenges

See more examples of how we solve architecture, performance, and scale challenges with tailored React and React Native solutions.