Optimising Scrolling Performance with Litho
Article Summary
Swiggy's Android team was hitting scroll performance walls with traditional RecyclerViews. Their solution? Facebook's Litho framework, which delivered massive performance gains.
Sarabjeet Singh from Swiggy's mobile team shares a detailed technical guide on implementing Litho, a declarative UI framework that uses FlexBox layouts and asynchronous rendering. This is a practical walkthrough with real code examples.
Key Takeaways
- Litho enables fine-grained recycling: individual text and images recycle separately, not entire views
- Asynchronous layout calculations happen off the UI thread, eliminating scroll jank
- FlexBox-based Yoga engine creates flatter view hierarchies with fewer ViewGroups
- Sections API handles RecyclerView complexity with automatic DiffUtil on background threads
- Code examples cover everything from Hello World to complex horizontal and grid lists
Swiggy achieved significant scroll performance improvements by replacing traditional Android views with Litho's declarative component system and background layout calculations.
About This Article
Swiggy's mobile team had issues with scroll performance when RecyclerViews contained complex content of different types. This directly affected app metrics and how users experienced the app.
Sarabjeet Singh's team switched to Facebook's Litho framework. They used its Sections API with DataDiffSection to run DiffUtil calculations on background threads, and ComponentRenderInfo to handle rendering multiple view types.
Litho's asynchronous layout engine and fine-grained recycling system improved performance significantly. Swiggy could now render complex lists with multiple content types while keeping scrolling smooth at 60fps without blocking the UI thread.