preact/production-readiness

Optimize TanStack Preact Table performance by reducing bundle size and stabilizing memo identities.

28.3k|3.6k|Updated Oct 20, 2016
One-click install
npx skills add https://github.com/TanStack/table --skill preact-production-readiness
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: preact/production-readiness
Source: https://github.com/TanStack/table/tree/main/packages/preact-table/skills/preact/production-readiness
Command: npx skills add https://github.com/TanStack/table --skill preact-production-readiness

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you ship a production-ready TanStack Preact Table by preventing unnecessary re-renders and bundle bloat, while keeping table state and feature configuration stable across renders.

Core Features & Use Cases

  • Tree-shake table features by registering only the features you actually use to reduce included code.
  • Stabilize identity for _features, columns, data, and row models to ensure memoization works and internal caches don’t churn.
  • Optimize rendering granularity by narrowing the useTable selector, using <table.Subscribe> for hot UI regions, and preferring slice atoms over external state plus on*Change.

Quick Start

Use the preact/production-readiness skill to review your @tanstack/preact-table setup and rewrite _features, useTable selectors, and subscriptions to minimize re-renders while keeping your table fully functional.

Frequently Asked Questions about preact/production-readiness

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I reduce bundle size when using TanStack Preact Table?

To reduce TanStack Preact Table bundle size, register only the specific table features you actually use instead of the default set. This tree-shaking approach strips unused code, minimizing production bundle bloat while maintaining table functionality.

Why does my Preact table re-render unnecessarily during sorting or filtering?

Unnecessary Preact table re-rendering occurs when internal memo identities churn. Stabilize the identity of `_features`, `columns`, `data`, and `_rowModels` by memoizing them, ensuring internal caches remain intact and preventing excessive UI updates.

What is the best way to optimize rendering granularity for complex Preact grids?

Optimize Preact grid rendering by narrowing the `useTable` selector to subscribe only to necessary state slices. Position `<table.Subscribe>` near hot UI subtrees to isolate updates and prevent widespread re-renders across the entire grid.

Can I use slice atoms instead of external state with on*Change for Preact tables?

Yes, preferring slice atoms over external state plus `on*Change` handlers optimizes Preact tables. Slice atoms provide granular state subscriptions, isolating UI updates to specific data slices and preventing unnecessary re-renders in complex grids.

When should I stabilize table feature configuration in Preact production builds?

Stabilize table feature configuration in Preact production builds when handling complex grids with sorting, filtering, pagination, and selection. Memoizing `_features`, `data`, and `columns` ensures internal memoization works correctly under precise render behavior demands.

Does tree-shaking table features affect sorting or pagination behavior in Preact?

Tree-shaking table features does not affect sorting or pagination behavior in Preact as long as you register the specific features you actively use. The table remains fully functional while excluding unnecessary code from the bundle.