feat: DH-21756: Add ui.component memoization and selective re-rendering by mofojed · Pull Request #1296 · deephaven/deephaven-plugins

mofojed · 2026-02-06T15:11:14Z

Added memo parameter to @ui.component to memoize a component, or pass a custom memoization function for checking behaviour
Implemented selective re-rendering - only rendering components that have had their state changed
- This is more in line with how React renders components, and is much more efficient
- Kind of needed to do this along with memoization; since we already needed to know if a child component was dirty if a parent was memoized

mofojed · 2026-02-06T22:30:32Z

+    )
+```
+
+---


With this notation we could also write:

memo_parent = ui.memo(parent)

jnumainville

Just gave some comments on the two options.

jnumainville · 2026-02-11T16:53:21Z

+                raise TypeError(
+                    f"@ui.memo can only be used with @ui.component decorated functions. "
+                    f"Got {type(element).__name__} instead."
+                )


I think the fact that we are throwing this error after checking for @ui.component is a point against this option.
A third option would be that @ui.memo creates a ui.component under the hood since it has to be one anyways, but then it would have to duplicate arguments if we add more to ui.component, so more to maintain. I don't love that option either.

Yea after playing with @ui.memo more, I think it makes the most sense to just do the @ui.component(memo= option.

jnumainville · 2026-02-11T17:02:43Z

+- ❌ Two decorators required (more verbose)
+- ❌ Easy to get decorator order wrong (`@ui.component` then `@ui.memo` won't work)


Not sure if there is more possible decorators (routers?), but these cons would compound quickly if we did have any others.

If we thought of the decorators as just wrapper components like React, then the order at least makes intuitive sense

But I'm not sure I have a strong opinion on either syntax

jnumainville · 2026-02-11T17:08:53Z

+
+**Cons:**
+
+- ❌ Cannot memoize third-party components


I'm not sure I understand this con, or at least I don't think it's meaningful? It would be easy enough to take third-party components and put them in your own memoized component without any real problems?
Maybe it's saying you can't do something like ui.memo(external_ui_component, ...) directly, but you can just wrap it in another component, and that isn't substantially more difficult.

Agreed, the con is minimal

jnumainville · 2026-02-11T17:15:27Z

+
+## Recommendation
+
+**Implement both options**, with Option B (`memo=`) as the primary API and Option A (`@ui.memo`) for advanced use cases.


I'd say only B is my choice. Easier to maintain, much simpler to use, and I don't think these advanced use cases are really meaningful.

github-actions · 2026-02-13T19:41:30Z

ui docs preview (Available for 14 days)

dsmmcken · 2026-02-17T18:59:08Z

+    items_bad = ["apple", "banana"]
+
+    # GOOD: Use use_memo to keep the same reference
+    items_good = ui.use_memo(lambda: ["apple", "banana"], [])
+
+    return ui.flex(
+        ui.button("Increment", on_press=lambda: set_count(count + 1)),
+        ui.text(f"Count: {count}"),
+        item_list(items_good),  # Won't re-render unnecessarily
+        direction="column",
+    )
+
+
+app_example = app()
+```
+
+### Passing Callback Functions
+
+Lambda functions and inline function definitions create new references each render:
+
+```python
+from deephaven import ui
+
+
+@ui.component(memo=True)
+def button_row(on_click):
+    return ui.button("Click me", on_press=on_click)
+
+
+@ui.component
+def app():
+    count, set_count = ui.use_state(0)
+
+    # BAD: Creates a new function reference every render
+    # handle_click_bad = lambda: print("clicked")
+
+    # GOOD: Use use_callback to memoize the function
+    handle_click_good = ui.use_callback(lambda: print("clicked"), [])


Inconsistent in presentation, line is left in, vs commented out

Opted to leave the line in, since it's assigning to a different variable name.

github-actions · 2026-02-24T15:09:10Z

ui docs preview (Available for 14 days)

github-actions · 2026-03-27T18:29:38Z

ui docs preview (Available for 14 days)

github-actions · 2026-06-11T15:33:19Z

ui docs preview (Available for 14 days)

github-actions · 2026-06-11T17:04:24Z

ui docs preview (Available for 14 days)

github-actions · 2026-06-11T18:18:55Z

ui docs preview (Available for 14 days)

github-actions · 2026-06-12T14:22:56Z

ui docs preview (Available for 14 days)

Two options for props-based memoization to skip re-renders: - Option A: @ui.memo decorator (familiar to React devs) - Option B: @ui.component(memo=True|compare_fn) parameter (cleaner) Includes: - API design and implementation details - MemoizedFunctionElement and Renderer changes - Unit tests for both options - Performance benchmarks - Comparison and recommendation (implement both)

- Checks props and if they're the same, just return the previously rendered node - Still need to clean up the `_default_are_props_equal` and how children are handled, I think? - Also need to add a bunch of unit tests. But it more or less works! ``` from deephaven import ui def are_props_equal(old_props, new_props): print(f"Checking props {old_props} vs {new_props}") return old_props == new_props @ui.component def foo_component(name): value, set_value = ui.use_state(0) print(f"foo {name} render") return ui.button(f"foo {name} {value}", on_press=lambda: set_value(value+1)) @ui.memo(are_props_equal=are_props_equal) @ui.component def memo_foo_component(name): value, set_value = ui.use_state(0) print(f"memo_foo {name} render") return ui.button(f"foo {name} {value}", on_press=lambda: set_value(value+1)) memo_foo = ui.memo()(foo_component) @ui.component def bar_component(): value, set_value = ui.use_state(0) return ui.flex( foo_component("A"), foo_component("B"), memo_foo_component("X"), memo_foo("Y"), ui.button(f"bar {value}", on_press=lambda: set_value(value+1)) ) mf = memo_foo_component("mf") b = bar_component() ```

- Allow @ui.memo syntax in addition to @ui.memo() - Add tests for custom are_props_equal functions: - Deep equality comparison for object props - Always rerender (returns False) - Always skip (returns True) - Selective prop comparison - Threshold-based comparison

- Update render-cycle.md with section on optimizing re-renders - Create memoizing-components.md with comprehensive guide: - Basic usage and how memoization works - When to use @ui.memo - Custom comparison with are_props_equal - Common pitfalls (new objects, callbacks) - Comparison with use_memo hook - Add memoizing-components to sidebar navigation

…nent - Modified component.py to add memo parameter (True/False/callable) - Removed standalone memo.py decorator - Updated components/__init__.py exports - Updated all tests to use @ui.component(memo=True) syntax - Updated documentation in memoizing-components.md and render-cycle.md

- No special treatment for children

- Now it is optimized to only re-render when necessary - Needed to fix up some existing tests that was relying on the previous non-optimized behaviour - Added some unit tests

- Don't allow `GeneratorType` as a type for children - Now `children` is a more specific type

- Otherwise we get errors when reloading widgets

- Changes PropsType to a Mapping instead of a Dict. Allows TypedDicts to be passed in as well then, and we don't need to modify props so it's more accurate - Add `float` to NodeType - Added a note to update a few spots where we pass a Table or ItemTableSource back directly, rather than wrapping them in an Element or something else

Wrap on_change/on_queue callbacks in a TestRoot via a thin shim to match the new single-root RenderContext constructor signature.

The default memo comparison was changed to plain dict_shallow_equal, which compares by identity. Positional args are bundled into a fresh 'children' tuple every render, so memoization never matched and components always re-rendered. Restore _default_are_props_equal to compare children by value and shallow-compare remaining props, and revert the test expectation that had been flipped to encode the buggy behavior.

…ering Under selective re-rendering, a component only re-renders when a dirty render is propagated or its own RenderContext is marked dirty. URL changes went through _set_url_state, which updated the URL and set the stream-level dirty flag but never marked any RenderContext dirty. As a result, components reading the URL (e.g. use_path, use_query_params) hit the render cache and never updated, breaking routing and query-param navigation. Add a public RenderContext.mark_dirty() and call it from _set_url_state so the root context (and its children) re-render when the URL changes, mirroring how initial state import marks the root dirty.

github-actions · 2026-06-12T17:10:08Z

ui docs preview (Available for 14 days)

mofojed · 2026-06-12T17:08:50Z

+        # The URL is not tracked as component state, so mark the root context dirty
+        # to ensure components that read the URL (e.g. use_path) are re-rendered.
+        self._context.mark_dirty()


Ideally, we'd have something like ui.context that could be used for getting/setting the path, and then wire that up to handle marking consumers dirty. Not part of this change.

mofojed requested a review from mattrunyon February 6, 2026 15:11

mofojed self-assigned this Feb 6, 2026

mofojed force-pushed the ui-component-memoization branch from f383c9d to e85f1bc Compare February 6, 2026 15:13

mofojed requested review from dsmmcken and jnumainville February 6, 2026 15:14

mofojed commented Feb 6, 2026

View reviewed changes

mofojed mentioned this pull request Feb 10, 2026

feat(ui): Optimize render cycle to only re-render components with state changes #1295

Closed

mofojed changed the title ~~plan: Add component memoization implementation plan~~ feat: Add ui.memo component memoization Feb 10, 2026

mofojed force-pushed the ui-component-memoization branch from 5e1318c to 305fc47 Compare February 10, 2026 21:01

jnumainville reviewed Feb 11, 2026

View reviewed changes

mofojed changed the title ~~feat: Add ui.memo component memoization~~ feat: Add ui.component memoization and selective re-rendering Feb 13, 2026

mofojed force-pushed the ui-component-memoization branch from c56be04 to 0241cc8 Compare February 13, 2026 13:24

dsmmcken reviewed Feb 17, 2026

View reviewed changes

mofojed changed the title ~~feat: Add ui.component memoization and selective re-rendering~~ feat: DH-21756: Add ui.component memoization and selective re-rendering Feb 23, 2026

mofojed requested review from dsmmcken and jnumainville February 23, 2026 19:20

mofojed force-pushed the ui-component-memoization branch from 17e0d28 to 1ff45d9 Compare March 27, 2026 18:26

mofojed force-pushed the ui-component-memoization branch from 1ff45d9 to 6188a0b Compare June 11, 2026 15:29

mofojed force-pushed the ui-component-memoization branch from 2f3ed22 to 79da6df Compare June 12, 2026 14:19

mofojed added 4 commits June 12, 2026 13:06

Fix unit tests

d567c3e

test: Add unit tests for ui.memo decorator

936a394

mofojed added 19 commits June 12, 2026 13:06

Change up how children are compared

1505d9a

- No special treatment for children

fix: Remove func param from second overload to fix Pylance error

0efaeaa

Add plans for selective re-rendering, and tests that currently fail

0cc4008

Selective re-rendering

71080e1

- Now it is optimized to only re-render when necessary - Needed to fix up some existing tests that was relying on the previous non-optimized behaviour - Added some unit tests

Fix up typing

944c04c

- Don't allow `GeneratorType` as a type for children - Now `children` is a more specific type

Need to mark the RenderContext as dirty when importing state

2fccf01

- Otherwise we get errors when reloading widgets

Update docs snapshots

4f88775

Skip a test

eb74bc0

Cleanup based on review

b981c81

Bit more consistency

e689dd5

Update snapshots

2e02506

test: Fix test_memo RenderContext usage after rebase

56e8252

Wrap on_change/on_queue callbacks in a TestRoot via a thin shim to match the new single-root RenderContext constructor signature.

test: Add e2e test for ui.component memoization

fd1996f

mofojed force-pushed the ui-component-memoization branch from 79da6df to fd1996f Compare June 12, 2026 17:07

mofojed commented Jun 12, 2026

View reviewed changes

mofojed marked this pull request as ready for review June 12, 2026 17:10

github-actions Bot requested a review from margaretkennedy June 12, 2026 17:10

		- ❌ Two decorators required (more verbose)
		- ❌ Easy to get decorator order wrong (`@ui.component` then `@ui.memo` won't work)


		## Recommendation

		Implement both options, with Option B (`memo=`) as the primary API and Option A (`@ui.memo`) for advanced use cases.

Conversation

mofojed commented Feb 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jnumainville left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Feb 13, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Feb 24, 2026

Uh oh!

github-actions Bot commented Mar 27, 2026

Uh oh!

github-actions Bot commented Jun 11, 2026

Uh oh!

github-actions Bot commented Jun 11, 2026

Uh oh!

github-actions Bot commented Jun 11, 2026

Uh oh!

github-actions Bot commented Jun 12, 2026

Uh oh!

github-actions Bot commented Jun 12, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

mofojed commented Feb 6, 2026 •

edited

Loading