ReddRadar
Agent skill
react-component-architecture
Modern React component patterns with hooks, composition, and TypeScript
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/react-component-architecture
SKILL.md
React Component Architecture
Component Design Principles
- Single Responsibility - Each component does one thing well
- Composition Over Configuration - Use children and render props over prop drilling
- Colocation - Keep related code together (styles, tests, types)
- Controlled vs Uncontrolled - Be explicit about state ownership
Component Patterns
Compound Components
For complex UI with shared state:
const Tabs = ({ children, defaultValue }: TabsProps) => {
const [active, setActive] = useState(defaultValue);
return (
<TabsContext.Provider value={{ active, setActive }}>
{children}
</TabsContext.Provider>
);
};
Tabs.List = TabsList;
Tabs.Trigger = TabsTrigger;
Tabs.Content = TabsContent;
Render Props for Flexibility
When consumers need control over rendering:
interface ListProps<T> {
items: T[];
renderItem: (item: T, index: number) => ReactNode;
keyExtractor: (item: T) => string;
}
function List<T>({ items, renderItem, keyExtractor }: ListProps<T>) {
return items.map((item, i) => (
<Fragment key={keyExtractor(item)}>{renderItem(item, i)}</Fragment>
));
}
Custom Hooks for Logic Extraction
Extract reusable stateful logic:
function useToggle(initial = false) {
const [state, setState] = useState(initial);
const toggle = useCallback(() => setState(s => !s), []);
const setTrue = useCallback(() => setState(true), []);
const setFalse = useCallback(() => setState(false), []);
return { state, toggle, setTrue, setFalse } as const;
}
Polymorphic Components
Components that render as different elements:
type PolymorphicProps<E extends ElementType> = {
as?: E;
} & ComponentPropsWithoutRef<E>;
function Box<E extends ElementType = 'div'>({
as,
...props
}: PolymorphicProps<E>) {
const Component = as || 'div';
return <Component {...props} />;
}
Props Patterns
Discriminated Union Props
For mutually exclusive prop combinations:
type ButtonProps =
| { variant: 'link'; href: string; onClick?: never }
| { variant: 'button'; onClick: () => void; href?: never };
Default Props with Destructuring
function Button({
variant = 'primary',
size = 'md',
...props
}: ButtonProps) {
// ...
}
Performance Patterns
- Memoize expensive computations with
useMemo - Memoize callbacks passed to children with
useCallback - Split contexts by update frequency
- Use
React.memofor pure presentational components - Virtualize long lists with react-virtual or similar
File Structure
components/
Button/
Button.tsx # Component
Button.test.tsx # Tests
Button.types.ts # Types (if complex)
index.ts # Re-export
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?