# Apply Frontend Common Patterns

> Apply Frontend Common Patterns

- Skill: `willyu1007/apply-frontend-common-patterns` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add willyu1007/apply-frontend-common-patterns`
- Raw SKILL.md: https://api.skillmd.com/api/skills/willyu1007/apply-frontend-common-patterns/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: willyu1007 (https://skillmd.com/u/willyu1007)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/willyu1007/apply-frontend-common-patterns

---


# Apply Frontend Common Patterns

## Purpose
Standardize common React + TypeScript patterns so components remain predictable, readable, and efficient.

## When to use
Use this skill when you are:
- Designing components with multiple interactions
- Managing derived state or expensive computations
- Stabilizing callbacks and preventing re-renders
- Implementing controlled inputs and forms
- Reviewing UI code for maintainability


Avoid using this skill when:
- you are primarily changing routing, data fetching, or styling rather than local component behavior
- a simpler component structure would solve the problem without introducing memoization, derived state, or complex hooks

## Inputs
- Component responsibilities and data dependencies
- Performance concerns (slow renders, frequent updates)
- Existing conventions in the codebase (state management, form library)

## Outputs
- A component/hook plan with clear state boundaries
- A memoization strategy (what to memoize, what not to)
- A checklist to prevent common React pitfalls

## Rules
- State SHOULD be minimal; prefer derived values via memoization instead of duplicating state.
- Side effects MUST be explicit and isolated.
- Memoization MUST be used intentionally (avoid cargo-cult `useMemo`/`useCallback`).

## Practical guidance

### useMemo
Use when:
- computing a derived value is expensive
- the derived value is used in render and depends on stable inputs

Avoid when:
- computation is cheap
- it complicates readability without measurable benefit

### useCallback
Use when:
- passing callbacks to memoized children
- the callback is a dependency of another hook

Avoid when:
- it adds complexity and child components do not rely on referential stability

### Prefer composition
- Break large components into smaller ones that compose together.
- Extract hooks for non-visual logic.

## Steps
1. Identify stateful concerns (UI state vs server state).
2. Implement server state via a query/cache layer (if applicable).
3. Implement UI state with minimal primitives (`useState`, `useReducer`).
4. Add memoization only after identifying an actual need.
5. Verify:
   - basic render
   - key interactions
   - error states

## Verification

- [ ] Components render without errors
- [ ] State is minimal (no duplicated state that could be derived)
- [ ] Memoization is intentional (justified by profiling or known expensive computation)
- [ ] Side effects are isolated in hooks, not inline in render
- [ ] Key interactions work as expected
- [ ] No unnecessary re-renders (verify with React DevTools if needed)

## Boundaries

- MUST NOT add `useMemo`/`useCallback` without a clear reason
- MUST NOT duplicate state that can be derived
- MUST NOT mix side effects with rendering logic
- SHOULD NOT create deeply nested component trees without decomposition
- SHOULD NOT use inline object/array literals as hook dependencies
- SHOULD NOT ignore referential stability for memoized children

## Included assets
- Examples: `./examples/` contains patterns for derived state and callback stability.