react-18

What problem does it solve?

React 18 introduces hooks, concurrent features, and advanced patterns that require careful review to ensure correctness, performance, and maintainability. This skill provides structured guidelines to assess and improve React 18 codebases.

Core Features & Use Cases

• Hooks Best Practices: verify Rules of Hooks, correct dependency arrays, and proper custom hook naming.
• State Management: promote useState/useReducer patterns and avoid unnecessary prop drilling.
• Concurrent Features: evaluate useTransition, useDeferredValue, and Suspense usage for responsiveness and correctness.
• Suspense and Data Fetching: ensure boundaries and error handling are in place.
• Performance Optimization: recommend memoization, stable callbacks, and avoiding unnecessary renders.
• Component Patterns & Testing: encourage typed function components and RTL based tests. Use Case: When reviewing a React 18 app, apply these guidelines to improve reliability and performance across components, hooks, and data flows.

Quick Start

Run this skill against your React 18 project to identify hook, concurrency, and performance issues and apply recommended improvements.