component-refactoring

To refactor high-complexity React Native components, apply hook extraction to grouped state and effects, decompose monolithic UI into focused sub-components, and centralize modal management. This reduces cognitive load and improves readability without changing runtime behavior.

Extract custom hooks when code analysis reports complexity above 50 or 300+ lines, or when you need to simplify architecture. Identify grouped state and effects and move that logic into reusable hooks to segregate data-fetching from UI concerns.

The best way to manage modals in complex React Native components is to centralize modal handling. This separates modal management from core component logic, simplifying testing and orchestrating clean composition across sub-components.

Structure split React Native components by aligning with platform directory guidelines: use src/app for routes, src/components for UI, src/features for domain logic, and src/contexts for global state to ensure maintainable architecture.

Component refactoring does not change runtime behavior. The process strictly decomposes monolithic structures, extracts hooks, and segregates data-fetching and UI concerns to improve code quality while preserving existing application functionality.