skills.rest
Columbia-Cloudworks-LLC
Columbia-Cloudworks-LLCOFFICIAL
Explore all skills by this author →
WebsiteGitHub

react-best-practices

Optimize React performance in EquipQR by eliminating waterfalls, reducing bundle size, and minimizing re-renders.

1|Updated Jun 10, 2025
Search Tags:#performance#refactoring#react#rendering#vite#best-practices
One-click install
npx skills add https://github.com/Columbia-Cloudworks-LLC/EquipQR --skill react-best-practices-columbia-cloudworks-llc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/Columbia-Cloudworks-LLC/EquipQR/tree/main/.cursor/skills/react-best-practices
Command: npx skills add https://github.com/Columbia-Cloudworks-LLC/EquipQR --skill react-best-practices-columbia-cloudworks-llc

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

React applications in EquipQR can suffer from waterfalls, large bundle sizes, and excessive re-renders that degrade user experience. This Skill provides a structured, engineer-facing guide to optimize React code across a Vite + React Router + TanStack Query stack, with EquipQR-specific mappings.

Core Features & Use Cases

  • Performance-focused guidelines that target waterfalls, code-splitting, and render optimization to reduce TTI and improve user perception.
  • Stack-tailored rules for Vite + React Router + TanStack Query integration, with pragmatic examples and refactor strategies.
  • Code-review and development aid: apply patterns during writing, reviewing, or refactoring to improve stability and maintainability.

Quick Start

Review a React component and apply perf-focused rules to minimize waterfalls, bundle size, and re-renders.

Frequently Asked Questions about react-best-practices

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

FAQPage Schema
How do I eliminate data fetching waterfalls in a React application?▼

React re-render optimization involves applying targeted memoization rules to component design. This Skill enforces patterns that prevent unnecessary renders and ensure stable data flows, maintaining performance during refactoring.

What is the best way to reduce bundle size when using Vite and React Router?▼

React re-render optimization involves applying targeted memoization rules to component design. This Skill enforces patterns that prevent unnecessary renders and ensure stable data flows, maintaining performance during refactoring.

How do I optimize React re-renders during component refactoring?▼

React re-render optimization involves applying targeted memoization rules to component design. This Skill enforces patterns that prevent unnecessary renders and ensure stable data flows, maintaining performance during refactoring.

Can I use these React performance best practices with an existing TanStack Query setup?▼

React re-render optimization involves applying targeted memoization rules to component design. This Skill enforces patterns that prevent unnecessary renders and ensure stable data flows, maintaining performance during refactoring.

Why does my React app suffer from slow initial load times and how can I fix it?▼

React re-render optimization involves applying targeted memoization rules to component design. This Skill enforces patterns that prevent unnecessary renders and ensure stable data flows, maintaining performance during refactoring.

Related Skills

Explore More Software Engineering Skills→
timurgaleevtimurgaleev
5

benchmark

Detect performance regressions by comparing page load timings and resource metrics.

Community
Advanced
ofelixdevofelixdev

vercel-react-best-practices

Provides React and Next.js performance optimization guidelines covering waterfalls, bundle size, and rendering.

Community
Advanced
blueprintuiblueprintui
335

testing-performance

Detect and prevent performance regressions in bundle size and render time.

Official
Intermediate
CodenburgCodenburg

react-19

Optimize React 19 components using the React Compiler without manual memoization.

Community
Intermediate