react

WallysonGalvao's avatarfrom WallysonGalvao

React/Next.js best practices for modern, performant applications.

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 4, 2026
[Architecture Design]

When & Why to Use This Skill

This Claude skill provides a comprehensive set of best practices and architectural standards for building modern, high-performance React and Next.js applications. It emphasizes React 19 features such as Suspense and the 'use' hook, while enforcing clean component design, efficient data fetching with React Query, and robust cache management to ensure scalable and maintainable codebases.

Use Cases

  • Refactoring legacy React applications to adopt React 19 standards, including migrating from useEffect to Suspense and transition-based patterns.
  • Designing high-performance Next.js architectures by implementing standardized data fetching strategies and eliminating anti-patterns like constants inside component bodies.
  • Improving application resilience by setting up global error boundaries with retry logic and optimized loading states using useSuspenseQuery.
  • Establishing a scalable cache management system using enums and factories to avoid magic strings in React Query and Next.js cache tags.
namereact
descriptionReact/Next.js best practices for modern, performant applications.

React/Next.js Standards

React 19 Best Practices

  • Use Suspense, the use hook, and promises as props
  • Prefer use, useTransition, and startTransition over useEffect
  • You probably shouldn't use useEffect

Component Design

  • Keep components pure: don't declare constants or functions inside components
  • Use React Query for client-side async data fetching
  • Don't fetch data in useEffect

Loading & Error States

  • Prefer <Suspense> and useSuspenseQuery over React Query's isLoading
  • Use errorBoundary with retry button

Cache Management

  • Don't use magic strings for cache tags; use an enum/factory
  • Use enum for React Query cache strings

Avoid

  • Magic numbers/strings
  • Data fetching in useEffect
  • Constants inside component bodies
  • isLoading patterns when Suspense works