perf: revisit angular adapter to improve memory usage and flexrender … by KevinVandy · Pull Request #6528 · TanStack/table

KevinVandy · 2026-08-07T20:54:34Z

…dirty checking

🎯 Changes

✅ Checklist

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

🚀 Release Impact

This change affects published code, and I have generated a changeset.
This change is docs/CI/dev-only (no release).

Summary by CodeRabbit

New Features
- Added optional keys for rendered components, enabling predictable reuse or recreation when creation-time configuration changes.
- Improved synchronization of component inputs and outputs, including aliased inputs and changing event handlers.
- Enhanced template rendering for primitive values and supplied injectors.
Bug Fixes
- Prevented unnecessary view and component recreation during updates.
- Ensured removed inputs are cleared and stale output subscriptions are detached.
- Avoided repeated evaluation of table configuration during initialization.

…dirty checking

nx-cloud · 2026-08-07T20:55:11Z

View your CI Pipeline Execution ↗ for commit 640df9e

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

☁️ Nx Cloud last updated this comment at 2026-08-07 21:01:54 UTC

github-actions · 2026-08-07T20:55:46Z

🚀 Changeset Version Preview

No changeset entries found. Merging this PR will not cause a version bump for any packages.

pkg-pr-new · 2026-08-07T20:58:21Z

More templates

@tanstack/alpine-table

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

@tanstack/angular-table

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

@tanstack/angular-table-devtools

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

@tanstack/ember-table

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

@tanstack/lit-table

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

@tanstack/match-sorter-utils

npm i https://pkg.pr.new/@tanstack/match-sorter-utils@6528

@tanstack/octane-table

npm i https://pkg.pr.new/@tanstack/octane-table@6528

@tanstack/preact-table

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

@tanstack/preact-table-devtools

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

@tanstack/react-table

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

@tanstack/react-table-devtools

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

@tanstack/solid-table

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

@tanstack/solid-table-devtools

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

@tanstack/svelte-table

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

@tanstack/table-core

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

@tanstack/table-devtools

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

@tanstack/vue-table

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

@tanstack/vue-table-devtools

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

commit: 640df9e

coderabbitai · 2026-08-07T20:59:27Z

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 5954687d-ce3f-4bf1-a67a-5258de0683f3

📥 Commits

Reviewing files that changed from the base of the PR and between 3af6abc and 640df9e.

📒 Files selected for processing (13)

packages/angular-table/package.json
packages/angular-table/src/flex-render/flags.ts
packages/angular-table/src/flex-render/flexRenderComponent.ts
packages/angular-table/src/flex-render/flexRenderComponentFactory.ts
packages/angular-table/src/flex-render/renderer.ts
packages/angular-table/src/flex-render/view.ts
packages/angular-table/src/helpers/flexRenderCell.ts
packages/angular-table/src/injectTable.ts
packages/angular-table/src/reactivity.ts
packages/angular-table/tests/flex-render/flex-render-component.test-d.ts
packages/angular-table/tests/flex-render/flex-render.bench.ts
packages/angular-table/tests/flex-render/flex-render.unit.test.ts
packages/angular-table/tests/injectTable.test.ts

📝 Walkthrough

Walkthrough

Flex-render now caches component metadata, supports keyed component reuse, synchronizes inputs and outputs explicitly, and uses one reactive rendering effect. Tests and benchmarks cover rendering updates, component replacement, and large-table scenarios. Table option and signal evaluation were also adjusted.

Changes

Flex-render lifecycle and performance

Layer / File(s)	Summary
Component metadata and reuse synchronization `packages/angular-table/src/flex-render/flexRenderComponent.ts`, `packages/angular-table/src/flex-render/flexRenderComponentFactory.ts`	Component metadata is cached per type. Optional keys control component reuse. Inputs and outputs synchronize through explicit tracking.
Reactive rendering and view updates `packages/angular-table/src/flex-render/renderer.ts`, `packages/angular-table/src/flex-render/view.ts`, `packages/angular-table/src/helpers/flexRenderCell.ts`	Rendering uses one effect. Views recreate when content or keys require it and update primitive, template, and component values directly.
Flex-render validation and benchmarks `packages/angular-table/tests/flex-render/*`, `packages/angular-table/package.json`	Tests cover signal updates, output subscriptions, aliased inputs, and keyed reuse. Benchmarks cover large mixed tables and hot paths.
Option and signal evaluation `packages/angular-table/src/injectTable.ts`, `packages/angular-table/src/reactivity.ts`, `packages/angular-table/tests/injectTable.test.ts`	Table options are evaluated once. Signal adapters subscribe to source signals directly.

Estimated code review effort: 4 (Complex) | ~45 minutes

Sequence Diagram(s)

sequenceDiagram
  participant FlexViewRenderer
  participant FlexRenderView
  participant FlexRenderComponentRef
  participant ComponentInstance
  FlexViewRenderer->>FlexViewRenderer: resolve content and props
  FlexViewRenderer->>FlexRenderView: create or update view
  FlexRenderView->>FlexRenderComponentRef: compare component type and key
  FlexRenderComponentRef->>ComponentInstance: synchronize inputs and outputs
  ComponentInstance-->>FlexViewRenderer: render updated component

Suggested reviewers: riccardoperra

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch perf/angular-rendering-improvements

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.}

riccardoperra and others added 2 commits August 7, 2026 01:25

perf: revisit angular adapter to improve memory usage and flexrender …

cf9d104

…dirty checking

Merge branch 'main' into perf/angular-rendering-improvements

640df9e

KevinVandy closed this Aug 7, 2026

Navigation Menu

Uh oh!

Uh oh!

perf: revisit angular adapter to improve memory usage and flexrender … - #6528

perf: revisit angular adapter to improve memory usage and flexrender …#6528
KevinVandy wants to merge 2 commits into
mainfrom
perf/angular-rendering-improvements

KevinVandy commented Aug 7, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

nx-cloud Bot commented Aug 7, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Aug 7, 2026

Uh oh!

pkg-pr-new Bot commented Aug 7, 2026

Uh oh!

coderabbitai Bot commented Aug 7, 2026 •

edited

Loading

Review failed

Walkthrough

Changes

Sequence Diagram(s)

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Uh oh!

Conversation

KevinVandy commented Aug 7, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎯 Changes

✅ Checklist

🚀 Release Impact

Summary by CodeRabbit

Uh oh!

nx-cloud Bot commented Aug 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Aug 7, 2026

🚀 Changeset Version Preview

Uh oh!

pkg-pr-new Bot commented Aug 7, 2026

Uh oh!

coderabbitai Bot commented Aug 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Sequence Diagram(s)

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

KevinVandy commented Aug 7, 2026 •

edited by coderabbitai Bot

Loading

nx-cloud Bot commented Aug 7, 2026 •

edited

Loading

coderabbitai Bot commented Aug 7, 2026 •

edited

Loading