component-refactoring

Refactor high-complexity React Native components into modular units with hooks and sub-components.

Updated Jan 12, 2026

Search Tags:#architecture #hooks #refactor #code-quality #react-native #modals #component-splitting

Ready to run

npx skills add https://github.com/prince-appiah/green-plate-mobile --skill component-refactoring-prince-appiah

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: component-refactoring
Source: https://github.com/prince-appiah/green-plate-mobile/tree/main/.github/skills/component-refactoring
Command: npx skills add https://github.com/prince-appiah/green-plate-mobile --skill component-refactoring-prince-appiah

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Refactor complex React Native components in the Green Plate Mobile app into modular, maintainable units to reduce cognitive load, improve readability, and simplify testing.

Core Features & Use Cases

Hook extraction: Identify grouped state and effects and move logic into reusable hooks.
Component decomposition: Break monolithic components into focused sub-components and orchestrate them via clean composition.
Modal & data-flow management: Centralize modal handling and segregate data-fetching and UI concerns according to Green Plate patterns.
Platform alignment: Follow the project's directory structure guidelines (src/app for routes, src/components for UI, src/features for domain logic, src/contexts for global state).

Quick Start

Identify a high-complexity component and apply the refactoring patterns to extract hooks, sub-components, and modal management.

Frequently Asked Questions about component-refactoring

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I refactor a React Native component that has high complexity and hundreds of lines?▼

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.

When should I extract custom hooks from my React Native components?▼

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.

What is the best way to manage modals in a complex React Native component?▼

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.

How do I structure files when splitting React Native components into modular units?▼

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.

Does component refactoring change the runtime behavior of my application?▼

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.