Performance guidelines

Loom keeps UI rendering separate from gameplay code, but your bridge shape and frontend choices still affect performance.

Push state deliberately

Every bridge state assignment can send data to the UI. Prefer meaningful updates over per-frame pushes:

if (Health != newHealth)
{
    Health = newHealth;
}

Do not push rapidly changing values unless the UI truly needs each update.

Choose the right collection type

Use snapshot collections for small values that change as a whole:

public List<ItemState> Inventory { get; set; } = new();

Use reactive collections for lists or maps that change frequently:

public ReactiveList<QuestState> Quests { get; } = new();

Avoid sending very large lists repeatedly when a smaller derived state would do.

Prefer state for durable truth

Use state for values the UI can render at any time. Use events for one-shot visual reactions. Do not send the same durable value repeatedly as events.

CSS and layout

Most browser performance advice applies:

• Keep layout hierarchy understandable.
• Avoid expensive full-screen filters.
• Animate transform and opacity when possible.
• Avoid layout thrash from measuring and writing repeatedly in JavaScript.

Fonts and assets

Do not load fonts from external sources (i.e. Google Fonts), since they will take some time to load and cause unnecessary flashes. Download the fonts into the project and serve them locally instead.

Measure before tuning

Use Debugging with DevTools to inspect layout, network, console output, and frontend performance. Use Unity profiling tools for game-side frame budget questions.