skills.rest
CountJung
CountJungCOMMUNITY
Explore all skills by this author →
GitHub

react-best-practices

Enforce React performance best practices in Tauri UI projects.

Updated Apr 3, 2026
Search Tags:#performance#react#tauri#memoization#tanstack-query#lazy-loading#code-splitting
One-click install
npx skills add https://github.com/CountJung/KISAutoTrade --skill react-best-practices-countjung
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/CountJung/KISAutoTrade/tree/main/.github/skills/react-best-practices
Command: npx skills add https://github.com/CountJung/KISAutoTrade --skill react-best-practices-countjung

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Tauri-based apps often suffer from bloated bundles, waterfall data fetching, and excessive re-renders. This Skill codifies proven rules to reduce bundle size, improve load times, and keep UI responsive.

Core Features & Use Cases

  • Waterfall removal through parallel data fetching and useQueries to avoid sequential waits.
  • Bundling optimization by direct path imports for MUI and icons to prevent loading thousands of modules.
  • Rendering optimization via selective useMemo/useCallback, and strategic memoization.
  • Code splitting with React.lazy and Suspense for heavy routes or components.
  • TanStack Query deduplication and clean query-key management to avoid duplicate fetches.
  • LocalStorage versioning for persistent UX settings across reloads.

Quick Start

Apply these best-practice rules to the React/Tauri project to reduce bundle size and improve render performance.

Frequently Asked Questions about react-best-practices

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

FAQPage Schema
How do I reduce bundle size in a React and Tauri application?▼

Avoid barrel imports for MUI and icons to prevent loading thousands of unused modules. Use direct path imports and implement React.lazy with Suspense for code splitting.

What is the best way to prevent waterfall data fetching in React?▼

Use TanStack Query's useQueries to implement parallel data fetching and consolidate query-keys. This avoids sequential waits and deduplicates network requests.

When should I use useMemo and useCallback for React rendering optimization?▼

Apply useMemo and useCallback judiciously to minimize unnecessary re-renders. Use strategic memoization to target expensive calculations and prevent child component re-rendering when props remain unchanged.

Does this React performance optimization approach work with TanStack Query?▼

Yes, it integrates TanStack Query by consolidating queries and maintaining clean query-key management to avoid duplicate fetches. This ensures efficient data retrieval in complex applications.

How do I maintain persistent UX settings across reloads in a Tauri app?▼

Implement a localStorage versioning scheme to maintain persistent UX settings across reloads. This ensures user preferences persist without data migration conflicts.

Why does importing from MUI barrel files increase my bundle size?▼

Barrel imports force bundlers to load thousands of unused MUI modules. Using direct path imports prevents this overhead and significantly reduces the final bundle size.

Related Skills

Explore More Software Engineering Skills→
BaoNguyen09BaoNguyen09
6

install-mac

Install Node.js and project dependencies on macOS for development.

Community
Intermediate
koralliskorallis
90

performance-optimization

Analyze performance metrics and implement code splitting, lazy loading, and caching strategies.

Community
Advanced
captain-corgicaptain-corgi

frontend-dev-guidelines

Provide React/TypeScript frontend development guidelines covering Suspense, lazy loading, and MUI v7 styling.

Community
Advanced
hathbangerhathbanger

vercel-react-best-practices

Apply React and Next.js performance best practices to reduce bundle size.

Community
Advanced