RenderNode in Jetpack Compose (and Views)

Let's explore what RenderNodes are, how they optimize rendering performance, and why they're so important for efficient UI rendering on Android.

(Thanks @romainguy for clearing up these details 🤩)

RenderNodes are a fundamental part of how Android's UI rendering works, both in traditional Views and in Jetpack Compose. Understanding how they work can help you write more performant UI code and make better architectural decisions.

In this post, we'll explore what RenderNodes are, how they optimize rendering performance, and why they're so important for efficient UI rendering on Android.

What Are RenderNodes?

RenderNodes are a list of drawing commands with some other properties like transforms (e.g: translation). These commands can be used to issue GPU commands by the internal renderer. They are not GPU commands on their own.

When a chunk of UI (View or graphicsLayer) is associated with a RenderNode, the UI toolkit doesn't need to reexecute the code that generates those drawing commands, but can instead reuse the entire list of commands ✨

This reuse mechanism is one of the key performance optimizations in Android's rendering system.

RenderNodes in graphicsLayer

An example of this optimization can be found in graphicsLayer 🎨

Using a graphicsLayer means a RenderNode is used to capture the drawing commands of the involved items. This is no different than what Views did. The key benefit is that once the drawing commands are captured in a RenderNode, they can be reused without regenerating the commands from scratch. Let's see an example of this in LazyLists.

Performance Benefits in LazyLists

Read the full post in 👉 https://composeinternals.com/rendernode-in-android