LUI Documentation - Memo

Memoization

⚠️

Perhaps the most important part of your UI, proper use of Lui.Memo will translate directly to significantly increased performance.

Lui.Memo skips rebuilding and diffing a subtree while dependencies are unchanged.


Lui.Memo(Header)
Lui.Memo(Form, name.Value, email.Value)
Lui.Memo(() => ExpensivePanel(data.Value), data.Value)

Important rule: every piece of state read by the memo builder must be listed as a dependency if you want the node to be updated once the value changes.

Bad: (Unless you intend to the UI to never updates)


Lui.Memo(() => Lui.Text(_score.Value.ToString()))

This builds once and never updates.

Good:


Lui.Memo(() => Lui.Text(_score.Value.ToString()), _score.Value)

Memo builders must return a single node, not a Fragment.

You can check the components in /Assets/Leeveel/Lui/Scripts/Samples/Ready Components for several examples.