frontend code quality

Improve React and TypeScript code quality by applying component boundaries with single responsibility, managing state with useState, useReducer, or Context appropriately, and using typed conventions. Refactor toward stateless components, hook-driven modularization, and clear naming to establish maintainable architecture.

Structure React components with clear boundaries and single responsibility to reduce prop drilling. Use Context for shared state, custom hooks for stateless logic extraction, and composition patterns to keep component hierarchies shallow and maintainable.

Use useReducer for complex state logic involving multiple related values or state machines. useState suits simple, independent state. Discriminated unions and state machines in TypeScript clarify when each pattern is appropriate for production-grade reliability.

Refactor React components by extracting UI logic into custom hooks, separating concerns across component layers, and applying patterns like composition and state machines. Structure files by domain, use clear naming conventions, and implement robust error and loading handling.

Prevent bugs through state machines and discriminated unions for complex state, explicit side-effect boundaries, typed TypeScript conventions, and robust error and loading handling. Single-responsibility components and hook-driven modularization reduce state-related bugs.

Yes. Apply these patterns incrementally by extracting pieces of UI logic into custom hooks or small components, then refactor toward layered architecture. Component boundaries, state management guidance, and naming conventions work with existing codebases.