# Willyu1007 Skill Template Addon Apply Frontend Common Patterns

> Apply Frontend Common Patterns

- Skill: `tomevault-io/willyu1007-skill-template-addon-apply-frontend-common-patter` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/willyu1007-skill-template-addon-apply-frontend-common-patter`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/willyu1007-skill-template-addon-apply-frontend-common-patter/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/willyu1007-skill-template-addon-apply-frontend-common-patter

---


# 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.

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/willyu1007) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-14 -->