react-best-practices

Identify and optimize React performance pitfalls in Tanstack Start applications.

2|Updated Jan 14, 2026

Search Tags:#performance #react #refactor #code-review #bundle-size #tanstack-start

Ready to run

npx skills add https://github.com/retrip-ai/agent-skills --skill react-best-practices-retrip-ai

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/retrip-ai/agent-skills/tree/main/skills/react-best-practices
Command: npx skills add https://github.com/retrip-ai/agent-skills --skill react-best-practices-retrip-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill consolidates React performance guidelines tailored for Tanstack Start applications, helping teams avoid common inefficiencies in components, data fetching, and bundling, and guiding automated improvements during refactoring and code reviews.

Core Features & Use Cases

37+ rules across 8 categories to prioritize impact and provide actionable patterns.
Guidance for eliminating waterfalls, bundle size optimization, server-side rendering patterns, client-side data fetching, re-render optimization, rendering performance, JavaScript micro-optimizations, and advanced patterns.
Use cases include writing new components, reviewing performance issues, refactoring existing code, and optimizing Tanstack Start, Query, and Router integration.

Quick Start

Use this skill to audit a React codebase and generate targeted refactoring prompts and implementation steps.

Frequently Asked Questions about react-best-practices

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

FAQPage Schema

How do I optimize React performance issues in a Tanstack Start application?▼

Eliminate data fetching waterfalls in React by applying specific performance patterns for Tanstack Query and Tanstack Router integration, prioritizing parallel fetching and prefetching strategies outlined in the guidelines.

How do I reduce bundle size when using Tanstack Start and Tanstack Router?▼

Reduce bundle size in Tanstack Start by following dedicated optimization rules for code splitting, server-side rendering patterns, and JavaScript micro-optimizations provided within the performance guidelines.

Can I use this to guide refactoring and code reviews for React components?▼

Yes, you can audit a React codebase using these 37+ rules to identify re-render optimization opportunities, data fetching waterfalls, and bundle size issues, then generate targeted refactoring prompts and implementation steps.

What is the best way to prevent unnecessary re-renders in Tanstack Query?▼

Prevent unnecessary re-renders in Tanstack Query by applying specific rendering performance rules and client-side data fetching patterns designed to optimize component rendering across client and server contexts.

Does this React performance skill work for both client-side and server-side rendering contexts?▼

Yes, the performance guidelines apply to both client and server contexts, offering advanced patterns for server-side rendering and client-side data fetching within Tanstack Start, Tanstack Query, and Tanstack Router.