Skillshub react-component-patterns

Modern React component architecture and composition patterns. Use when designing reusable React components, applying composition patterns, or structuring component hierarchies. (triggers: **/*.jsx, **/*.tsx, component, props, children, composition, hoc, render-props)

install

source · Clone the upstream repo

git clone https://github.com/ComeOnOliver/skillshub

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/ComeOnOliver/skillshub "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/HoangNguyen0403/agent-skills-standard/react-component-patterns" ~/.claude/skills/comeonoliver-skillshub-react-component-patterns && rm -rf "$T"

manifest: skills/HoangNguyen0403/agent-skills-standard/react-component-patterns/SKILL.md

source content

React Component Patterns

Priority: P0 (CRITICAL)

Standards for building scalable, maintainable React components.

Implementation Guidelines

Architecture: Use Compound Components (e.g.,
```
<Select><Select.Option /></Select>
```
) for complex state sharing within a UI unit. Use Higher-Order Components (HOC) for cross-cutting concerns (e.g.,
```
withAuth
```
).
Composition: Prefer Slots or Render Props (
```
render={(data) => ...}
```
) over deep prop hierarchies. Use
```
children
```
prop for layout-based composition.
Components: Distinguish between Controlled (state from props) and Uncontrolled (local
```
useRef
```
state) components. Favor controlled for form validation.
Props: Use Explicit TS interfaces. Avoid Prop Drilling by leveraging Context API or Zustand for global/deeply nested state.
Boolean Props: Shorthand
```
<Cmp isVisible />
```
vs
```
isVisible={true}
```
.
Conditionals: Ternary (
```
Cond ? <A/> : <B/>
```
) over
```
&&
```
for rendering consistency (prevents
```
0
```
rendering).
Function Components: Only hooks. No classes. Small size (<250 lines). One component per file.
Exports: Named exports only. PascalCase naming.

Anti-Patterns

No Classes: Use hooks.
No Prop Drilling: Use Context/Zustand.
No Nested Definitions: Define components at top level.
No Index Keys: Use stable IDs.
No Inline Handlers: Define before return.

References

See references/patterns.md for Composition, Compound Components, and Render Props examples.