ReactComponent ArchitectureadvancedFeatured

React Component Composition & Compound Component Architecture Review

Refactor bloated prop-drilling components into clean, composable compound components with flexible layouts.

#react #compound-components #component-architecture #clean-code #refactoring

Compatibility & Specs

Compatible AI Models

ClaudeChatGPTGemini

Last UpdatedOct 3, 2026

Customizable Variables3 parameters

Main Prompt Template3 Variables

150 words • 1260 characters

Tip:Variables marked in purple brackets can be tailored below.

Customize Prompt

Fill in the variables below. Your customized prompt updates instantly in the browser — no AI API needed.

Parameters (3)* Indicates required field

Bloated Component Code*[bloated_component_code]

The component with too many props and flags

Desired Consumer Flexibility*[desired_flexibility]

How consumers should be able to arrange pieces

State Coordination Needed*[state_coordination]

Shared state between sub-components

3 parameters active

Live Customized OutputLive Preview

225 words

You are a Principal Frontend Architect and Design System Lead. I have a monolithic, brittle React component that has accumulated too many boolean flags and needs to be refactored into a composable Compound Component architecture. Current Bloated Component Code & Props Interface: interface DataTableProps { data: any[]; showSearch?: boolean; showPagination?: boolean; pageSize?: number; customHeaderActions?: React.ReactNode; isSelectable?: boolean; selectedRows?: string[]; onRowSelect?: (id: string) => void; renderCustomCell?: (col: string, val: any) => React.ReactNode; emptyStateText?: string; footerSummary?: boolean; } Desired Consumer Flexibility / Layout Variations: Consumers must be able to place the search bar anywhere (in a modal header, above the table, or omitted entirely), customize empty states with custom buttons, and reorder header controls freely. State & Event Coordination Needed Across Sub-Components: Search filter string, active page index, selected row ID set, and sorting direction. Perform a Component Architecture Overhaul: 1. Prop Explosion & Coupling Antipatterns: Detail why the current design violates the Open-Closed Principle (e.g. `showIcon`, `isModal`, `hasBorder`, `buttonPosition` flags). 2. Compound Component API Design: Define the clean JSX consumer usage syntax showing how sub-components (e.g. `<Card.Header>`, `<Card.Body>`, `<Card.Footer>`, `<Card.Action>`) compose together naturally. 3. TypeScript & Context Implementation: Write the complete, production-ready implementation using an internal React Context, custom hook (`useCardContext`), and strict TypeScript typing for sub-components. 4. Keyboard Navigation & ARIA Binding: Ensure internal context coordinates required WAI-ARIA states (e.g. `aria-expanded`, `aria-controls`) seamlessly across sub-components.

Launch in:

ChatGPT Claude Gemini

How to Use This Prompt

Follow this 3-step workflow to extract high-signal responses from any compatible AI model.

1. Tailor the Parameters

Use the interactive customizer above to substitute the bracketed placeholders with your exact context, requirements, and constraints.

2. Send to AI Model

Copy the prompt and paste it into Claude, ChatGPT, Gemini, or Copilot. These models follow structured multi-step constraints reliably.

3. Review and Iterate

Review the output against the verified benchmark below. Follow up in the conversation to stress-test edge cases or refine tone.

Prompt Variables & Parameters

Reference breakdown of every dynamic variable embedded in this prompt template.

Placeholder	Parameter Name	Type	Status	Description & Guidance
[bloated_component_code]	Bloated Component Code	textarea	Required	The component with too many props and flagsDefault: interface DataTableProps { data: any[]; showSearch?: boolean; showPagination?: boolean; pageSize?: number; customHeaderActions?: React.ReactNode; isSelectable?: boolean; selectedRows?: string[]; onRowSelect?: (id: string) => void; renderCustomCell?: (col: string, val: any) => React.ReactNode; emptyStateText?: string; footerSummary?: boolean; }
[desired_flexibility]	Desired Consumer Flexibility	textarea	Required	How consumers should be able to arrange piecesDefault: Consumers must be able to place the search bar anywhere (in a modal header, above the table, or omitted entirely), customize empty states with custom buttons, and reorder header controls freely.
[state_coordination]	State Coordination Needed	text	Required	Shared state between sub-componentsDefault: Search filter string, active page index, selected row ID set, and sorting direction.

Example Execution & Benchmark Output

Sample input arguments and the verified AI response demonstrating expected quality and formatting.

Sample VariablesInputs

[bloated_component_code]

interface DataTableProps { data: any[]; showSearch?: boolean; showPagination?: boolean; pageSize?: number; customHeaderActions?: React.ReactNode; isSelectable?: boolean; selectedRows?: string[]; onRowSelect?: (id: string) => void; renderCustomCell?: (col: string, val: any) => React.ReactNode; emptyStateText?: string; footerSummary?: boolean; }

[desired_flexibility]

Consumers must be able to place the search bar anywhere (in a modal header, above the table, or omitted entirely), customize empty states with custom buttons, and reorder header controls freely.

[state_coordination]

Search filter string, active page index, selected row ID set, and sorting direction.

Expected AI ResponseVerified Result

### Compound Component Refactor #### 1. Why Prop-Drilling Fails `DataTableProps` has 11 props configuring layout variations. When product teams ask to put the search box on the left instead of right, developers add another boolean (`searchAlignLeft`). This is the classic **Boolean Prop Explosion** antipattern. #### 2. Composable Consumer API ```tsx <DataTable data={users}> <DataTable.Toolbar> <DataTable.Search placeholder="Filter users..." /> <DataTable.ExportButton /> </DataTable.Toolbar> <DataTable.Table> <DataTable.Header /> <DataTable.Body emptyState={<CustomEmptyState />} /> </DataTable.Table> <DataTable.Pagination pageSizes={[10, 25, 50]} /> </DataTable> ``` #### 3. Type-Safe Context Implementation ```tsx import React, { createContext, useContext, useState, useMemo } from 'react'; interface TableContextType<T> { data: T[]; searchQuery: string; setSearchQuery: (q: string) => void; selectedIds: Set<string>; toggleSelect: (id: string) => void; } const TableContext = createContext<TableContextType<any> | null>(null); export function useTableContext<T>() { const ctx = useContext(TableContext); if (!ctx) throw new Error('DataTable subcomponents must be rendered inside <DataTable>'); return ctx as TableContextType<T>; } ```

Best Use Cases

Scenarios and roles where this prompt produces maximum leverage.

Design system teams refactoring monolithic UI widgets into flexible atomic components

Frontend engineers eliminating prop-drilling across multi-step forms and tables

React developers creating clean developer ergonomics for internal shared component libraries

Tips for Best Results

Techniques to elevate response fidelity

•Specify your exact runtime and dependency versions (e.g. Next.js 15, React 19, TypeScript 5.4) to eliminate outdated syntax hallucinations.
•Ask the model to enumerate potential runtime failure modes, concurrency issues, or null boundary states before generating code.
•Request idiomatic, type-safe solutions with clear unit test skeletons rather than monolithic scripts.

Common Mistakes to Avoid

Frequent failure modes and anti-patterns

•Pasting large unformatted code dumps without indicating the specific function or error you want analyzed.
•Deploying AI-generated code directly to production without verifying memory safety, edge cases, and security vulnerabilities.
•Omitting architectural constraints (such as SSR vs. client component boundaries or database indexing).