Frontend Patterns

DOM and State

• Prefer single source of truth (e.g. cart in one object/array); derive DOM from state
• Use data-* attributes for component configuration; avoid inline scripts for behavior
• Attach listeners once (event delegation where it helps) and clean up if needed (SPA-like transitions)

Forms

• Always associate label with input (id/for or wrapping)
• Validate on submit; show inline errors next to fields
• Disable submit while submitting; show loading/feedback
• Never trust client-only validation for security; backend must re-validate

Accessibility

• Focus order and visible focus styles
• Sufficient color contrast (WCAG AA)
• Images: meaningful alt; decorative images: alt="" or CSS background
• Buttons/links: clear purpose; avoid "click here"

React Patterns (Future Use)

Components

• Prefer composition over inheritance; small, focused components
• Props: explicit types (TypeScript) or PropTypes; avoid prop drilling (use context or state lifting when needed)

State

• Local state for UI-only (e.g. modal open); lift state only when multiple components need it
• Async data: loading, error, and data states; avoid stale state after unmount (cleanup in useEffect)

Forms

• Controlled inputs: value + onChange; single state object or per-field
• Validation: on blur and onSubmit; display errors next to fields
• Consider a small form library (e.g. React Hook Form) as forms grow

Performance

• useMemo for expensive derived values; useCallback for stable callbacks passed to children
• Lazy load heavy components with React.lazy + Suspense
• Long lists: virtualize (e.g. react-window) instead of rendering thousands of DOM nodes

Shared Principles

• No console.log in production; use a logging approach or strip in build
• Prefer immutable updates (spread/new array) when changing state
• Loading and error states for every async flow; clear, user-facing messages
• Responsive: test small viewports first; use relative units and flexible layouts