Does this skill support React 18 projects?

While many patterns overlap, this skill specifically prioritizes React 19 and Next.js 15+ primitives like the use() API and modern form hooks.

How does this skill handle useEffect?

It identifies 'code smells' where effects are used for data fetching or derived state and suggests modern server-side or pure-render alternatives.

Does it improve application performance?

Yes, by promoting Server Components and reducing client-side JavaScript, it helps improve First Contentful Paint (FCP) and overall TTI.

Can it help with Pages Router to App Router migrations?

Yes, it is designed to recognize legacy patterns like getServerSideProps and provide the modern App Router equivalents.

React & Next.js Modern Best Practices

Name: React & Next.js Modern Best Practices
Author: Tylerbryy

byTylerbryy

•

Herramientas para Desarrolladores

Enforces modern React 19 and Next.js App Router patterns to eliminate unnecessary effects and optimize server-first data fetching.

Acerca de

This skill guides developers through the paradigm shift from client-side synchronization to async-native development using React 19 and the Next.js App Router. It provides actionable checklists and code examples to eliminate waterfall requests, manage form state using modern hooks like useActionState, and implement Server Components and Server Actions correctly. By identifying legacy anti-patterns like useEffect-based fetching, it helps you build high-performance, SEO-friendly applications that leverage the latest architectural standards.

Características Principales

Enforces Server Component defaults for zero-JS bundle sizes
Optimizes data fetching through request memoization and the use() API
Promotes type-safe Server Actions for progressive enhancement and mutations
Audits code for incorrect useEffect usage and derived state anti-patterns
Guides implementation of React 19 form hooks like useActionState and useFormStatus
1 GitHub stars

Casos de Uso

Migrating legacy React applications from the Pages Router to the App Router
Refactoring heavy client-side state logic into optimized Server Components
Implementing progressively enhanced, type-safe forms with modern React 19 hooks

Acerca de

Características Principales

Enforces Server Component defaults for zero-JS bundle sizes
Optimizes data fetching through request memoization and the use() API
Promotes type-safe Server Actions for progressive enhancement and mutations
Audits code for incorrect useEffect usage and derived state anti-patterns
Guides implementation of React 19 form hooks like useActionState and useFormStatus
1 GitHub stars

Casos de Uso

Migrating legacy React applications from the Pages Router to the App Router
Refactoring heavy client-side state logic into optimized Server Components
Implementing progressively enhanced, type-safe forms with modern React 19 hooks