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.