epic-react-patterns

Standardize React patterns in Epic Stack apps with route loaders and TypeScript typings.

5.5k|464|Updated May 4, 2023
One-click install
npx skills add https://github.com/epicweb-dev/epic-stack --skill epic-react-patterns
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: epic-react-patterns
Source: https://github.com/epicweb-dev/epic-stack/tree/main/docs/skills/epic-react-patterns
Command: npx skills add https://github.com/epicweb-dev/epic-stack --skill epic-react-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill standardizes React patterns and best practices across Epic Stack apps to reduce ambiguity, improve maintainability, and speed up feature delivery.

Core Features & Use Cases

  • Data fetching patterns: prefer route loaders and memoized data fetching over useEffect for reliable, SSR-friendly data.
  • Performance and reusability: guidance on memoization, code-splitting, and stable component composition to minimize re-renders.
  • Type safety and routing: guidelines for TypeScript typings on routes and components, and robust error boundaries.

Quick Start

Load this skill into your Epic Stack project to apply React pattern guidelines across routes, components, and performance optimizations.

Frequently Asked Questions about epic-react-patterns

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

FAQPage Schema
What is the best way to fetch data in React for Epic Stack apps?

The best way to fetch data in React for Epic Stack apps is using route loaders and memoized fetching. This approach replaces useEffect to provide reliable, SSR-friendly data fetching across routes.

How do I standardize TypeScript typings on React routes?

To standardize TypeScript typings on React routes, apply explicit guidelines for route components and loader usage. This ensures type safety and robust error boundaries across your Epic Stack project.

Why should I avoid useEffect for data fetching in Epic Stack?

You should avoid useEffect for data fetching in Epic Stack because it is not SSR-friendly and can cause unreliable data loading. Route loaders provide a more reliable pattern for fetching data.

How do I minimize re-renders and optimize React performance in Epic Stack?

To minimize re-renders and optimize React performance in Epic Stack, use stable component composition, memoization, and code-splitting patterns. These techniques reduce unnecessary rendering cycles.

Can I use this Skill to implement error boundaries in my React app?

Yes, you can use this Skill to implement error boundaries in your React app. It provides guidelines for robust error boundaries and avoidance of common React anti-patterns in Epic Stack projects.

Does this Skill require any specific dependencies to standardize React patterns?

No specific external dependencies are required to standardize React patterns with this Skill. It applies directly to component design, routing, and performance tuning within your existing Epic Stack environment.

Related Skills