Skip to content

fix(ember-table): run flexRender cell/header functions once per render pass#6452

Merged
KevinVandy merged 1 commit into
TanStack:betafrom
johanrd:fix-flexrender-double-invocation
Jul 24, 2026
Merged

fix(ember-table): run flexRender cell/header functions once per render pass#6452
KevinVandy merged 1 commit into
TanStack:betafrom
johanrd:fix-flexrender-double-invocation

Conversation

@johanrd

@johanrd johanrd commented Jul 24, 2026

Copy link
Copy Markdown
Contributor

🎯 Changes

The result getter on FlexRenderCell/FlexRenderHeader/FlexRenderFooter is read by the template more than once (branch check + content), and a plain getter re-runs per read — so the user's render function executes 2× per render pass (3× for component cells). @cached makes it once, and guarantees the branch check and content see the same result.

Prior art

svelte's FlexRender has the same branched template shape and memoizes with $derived. All other adapters invoke the cell fn once per render pass (react/preact/solid render it as a component; vue calls it once).

Measured (10k rows × 20 cols, virtualized, prod build): initial render 2,640 → 1,320 cell fn executions (= rendered cells).

Tests: flex-render-invocation-count.test.gts — fails on beta, passes here. Suite 27/27.

✅ Checklist

  • I have followed the steps in the Contributing guide.
  • I have tested this code locally with pnpm test:pr.

Cowritten by claude

Summary by CodeRabbit

  • Performance Improvements
    • Improved table rendering efficiency by caching computed cell, header, and footer content.
    • Prevented redundant invocation of custom cell and header renderers during a single render pass.

…r pass

The FlexRender components computed `result` in a plain getter that the
template reads twice (component-branch check, then content), re-invoking the
user's cell/header/footer render function on every read. Cache the getter so
the render function runs exactly once per render pass.
@coderabbitai

coderabbitai Bot commented Jul 24, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

📝 Walkthrough

Walkthrough

FlexRender cell, header, and footer result getters now use Glimmer caching. A new integration test verifies that user-provided cell and header render functions are invoked only once per rendered result.

Changes

FlexRender caching

Layer / File(s) Summary
Cached results and invocation validation
packages/ember-table/src/FlexRender.gts, packages/ember-table/tests/integration/flex-render-invocation-count.test.gts
FlexRenderCell, FlexRenderHeader, and FlexRenderFooter memoize their result getters, while integration coverage verifies single invocation for rendered cells and headers.

Estimated code review effort: 2 (Simple) | ~10 minutes

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly matches the main change by describing FlexRender cell/header functions being invoked once per render pass.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@johanrd

johanrd commented Jul 24, 2026

Copy link
Copy Markdown
Contributor Author

pinging @rtablada for ember-review

@johanrd johanrd changed the title fix(ember-table): run flexRender cell/header functions once per render passs fix(ember-table): run flexRender cell/header functions once per render pass Jul 24, 2026
@nx-cloud

nx-cloud Bot commented Jul 24, 2026

Copy link
Copy Markdown

View your CI Pipeline Execution ↗ for commit dc02cdc

Command Status Duration Result
nx affected --targets=test:eslint,test:sherif,t... ✅ Succeeded 5m 31s View ↗
nx run-many --targets=build --exclude=examples/** ✅ Succeeded 25s View ↗

☁️ Nx Cloud last updated this comment at 2026-07-24 10:32:14 UTC

@pkg-pr-new

pkg-pr-new Bot commented Jul 24, 2026

Copy link
Copy Markdown
More templates

@tanstack/alpine-table

npm i https://pkg.pr.new/TanStack/table/@tanstack/alpine-table@6452

@tanstack/angular-table

npm i https://pkg.pr.new/TanStack/table/@tanstack/angular-table@6452

@tanstack/angular-table-devtools

npm i https://pkg.pr.new/TanStack/table/@tanstack/angular-table-devtools@6452

@tanstack/ember-table

npm i https://pkg.pr.new/TanStack/table/@tanstack/ember-table@6452

@tanstack/lit-table

npm i https://pkg.pr.new/TanStack/table/@tanstack/lit-table@6452

@tanstack/match-sorter-utils

npm i https://pkg.pr.new/TanStack/table/@tanstack/match-sorter-utils@6452

@tanstack/preact-table

npm i https://pkg.pr.new/TanStack/table/@tanstack/preact-table@6452

@tanstack/preact-table-devtools

npm i https://pkg.pr.new/TanStack/table/@tanstack/preact-table-devtools@6452

@tanstack/react-table

npm i https://pkg.pr.new/TanStack/table/@tanstack/react-table@6452

@tanstack/react-table-devtools

npm i https://pkg.pr.new/TanStack/table/@tanstack/react-table-devtools@6452

@tanstack/solid-table

npm i https://pkg.pr.new/TanStack/table/@tanstack/solid-table@6452

@tanstack/solid-table-devtools

npm i https://pkg.pr.new/TanStack/table/@tanstack/solid-table-devtools@6452

@tanstack/svelte-table

npm i https://pkg.pr.new/TanStack/table/@tanstack/svelte-table@6452

@tanstack/table-core

npm i https://pkg.pr.new/TanStack/table/@tanstack/table-core@6452

@tanstack/table-devtools

npm i https://pkg.pr.new/TanStack/table/@tanstack/table-devtools@6452

@tanstack/vue-table

npm i https://pkg.pr.new/TanStack/table/@tanstack/vue-table@6452

@tanstack/vue-table-devtools

npm i https://pkg.pr.new/TanStack/table/@tanstack/vue-table-devtools@6452

commit: dc02cdc

@NullVoxPopuli NullVoxPopuli left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lgtm. Thanks for the pr!

@KevinVandy
KevinVandy merged commit 8e21db3 into TanStack:beta Jul 24, 2026
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants