Guide | Optimize Performance

Most users will never need to think about performance. Compose is designed to be exceptionally fast and performant, even at scale.

But, it's always helpful to employ best practices to ensure your apps run well.

The main goal with performance is to reduce data sent between browser and server. A primary benefit of Compose is that you maintain full control over app logic while Compose handles UI rendering. But, this approach does require a large amount of network traffic as most user interactions are sent to the server for processing, and UI instructions are sent back.

Again - Compose is designed to handle scale. You'll really only hit issues if you're constantly re-rendering massive tables (e.g. 50,000+ rows), having frequent large layout shifts on heavy UIs (e.g. a UI containing images), or something of that nature.

In these cases, you can utilize the following approaches to improve performance. As always, feel free to reach out to atul@composehq.com or join our Discord if you'd like help.

Separate static content

You can hint to Compose that certain parts of your UI are static, which allows Compose to skip over them during re-renders. This is especially helpful for large tables and images.

Node.js

import { Page, UI } from "@composehq/sdk"

async function handler({ page, ui }: { page: Page, ui: UI }) {
    let count = 0;

    function incrementCount() {
        count++;
        page.update();
    }

    // The header is static, so we pass it directly to page.add() instead
    // of as a function return.
    page.add(ui.header("Static header"))

    // This text will re-render every time the count changes, so we pass it as a function
    page.add(() => ui.text(count))

    // This button doesn't need to ever re-render, so we pass it directly to page.add()
    page.add(ui.button("increment-btn", { label: "Increment", onClick: incrementCount }))
}

Python

import compose_sdk as c

async def handler(page: Page, ui: UI):
    count = 0

    def increment_count():
        nonlocal count
        count += 1
        page.update()

    # The header is static, so we pass it directly to page.add() instead
    # of as a function return.
    page.add(ui.header("Static header"))

    # This text will re-render every time the count changes, so we pass it as a function
    page.add(lambda: ui.text(count))

    # This button doesn't need to ever re-render, so we pass it directly to page.add()
    page.add(ui.button("increment-btn", label="Increment", on_click=increment_count))

Use multi-page apps

If you have a large number of components, consider using a multi-page app. This allows you to split your app into smaller chunks, which can improve performance.

See the multi-page apps guide for more info.

Use forms

When working with multiple inputs, group them using forms. Forms only perform network requests when submitted, which can result in a significant performance improvement, especially as the number of inputs managed by the form grows.

See the forms guide for more info.

Break up large page.add() calls

It's often helpful to break up large page.add() calls into smaller chunks. This helps Compose optimize UI updates.

For example, instead of:

Node.js

page.add(() => ui.stack([
    ui.text("Hello, world!"),
    ui.text("Hello, world!"),
    ui.text("Hello, world!"),
]))

Python

page.add(lambda: ui.stack([
    ui.text("Hello, world!"),
    ui.text("Hello, world!"),
    ui.text("Hello, world!"),
]))

do:

Node.js

page.add(() => ui.text("Hello, world!"))
page.add(() => ui.text("Hello, world!"))
page.add(() => ui.text("Hello, world!"))

Python

page.add(lambda: ui.text("Hello, world!"))
page.add(lambda: ui.text("Hello, world!"))
page.add(lambda: ui.text("Hello, world!"))