react-engineering

What problem does it solve?

This skill addresses the challenge of building scalable, maintainable React applications by consolidating best practices, patterns, and conventions into a guided blueprint.

Core Features & Use Cases

• Component patterns: emphasizes functional components, component composition, and clean props interfaces to improve reusability.
• State, effects, and performance: provides guidance on useState, useReducer, useEffect, memoization, and code-splitting to optimize render performance.
• Robust architecture: includes context, custom hooks, error boundaries, and consistent naming conventions to reduce complexity in real-world apps.
• Use case: when refactoring a legacy app, apply the patterns here to convert class components to functional components with hooks and to implement predictable state management.

Quick Start

Refactor a sample React component to use a functional component with hooks and a clean props interface.