Facebook Litho – Improve UI performance

Updated 13 December 2023


Litho is a library for UI performance improvement provided by the big tech giant Facebook.

Why do we use Litho?

-> Declarative:- Litho uses a declarative API to define UI components. You simply describe the layout for your UI based on a set of immutable inputs and the framework takes care of the rest.

With code generation, Litho can perform optimizations for your UI under the hood, while keeping your code simple and easy to maintain.

-> Asynchronous layout:- Litho can measure and layout your UI ahead of time without blocking the UI thread.

By decoupling its layout system from the traditional Android View system, Litho can drop the UI thread constraint imposed by Android so your app UI performance automatically improves.

-> Flatter view hierarchies:- Litho uses Yoga for layout and automatically reduces the number of ViewGroups that your UI contains.

This, in addition to Litho’s text optimizations, allows for much smaller view hierarchies and improves both memory and scroll performance as it will fast render on screen.

-> Fine-grained recycling:- With Litho, each UI item such as text, image, or video is recycled individually.

As soon as an item goes off-screen, it can be reused anywhere in the UI and pieced together with other items to create new UI elements.

Such recycling reduces the need for having multiple view types and improves memory usage and scroll performance.

Adding Litho to Your Project

Then add the dependencies like this:

1. Hello World

In this initial step, you’ll display a view with “Hello World!”.

First, initialize SoLoader in your Application class:

Behind the scenes, Litho uses Yoga for layout. Yoga has native dependencies and SoLoader is brought in to take care of loading those. Initializing SoLoader here ensures that you’re not referencing unloaded libraries later on.

Next, add a predefined Text Litho component to an activity:

LithoView is an Android ViewGroup that can render components; it is the bridge between Litho components and Android Views. The example sets the content for the activity to a LithoView that displays a Text component.

How do the components come into play? Let’s zero in on this piece of code:

Reference – https://fblitho.com/

Mobikul blog – https://mobikul.com/blog/

Thank You

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*

Be the first to comment.

Start a Project

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home