frontend-best-practiceslisted

# Frontend Best Practices ## Standards - TypeScript strict mode; no `any` without explicit justification (`unknown` + narrowing); ESLint (+ jsx-a11y) + Prettier per project config; `tsc --noEmit` - Vitest or Jest with Testing Library (query by role/label, not test IDs), MSW for API mocking, minimum 80% coverage; axe-core + manual keyboard testing; Lighthouse CI and bundle-size budgets (vite-plugin-visualizer / webpack-bundle-analyzer) - One-line JSDoc per public function, expanded only for complex logic ## Practices - Semantic HTML over generic divs; CSS custom properties for theming; component composition over prop drilling; lazy loading for code splitting; optimistic UI where appropriate; error boundaries with fallback UI; accessible forms (labels, error messages, focus management); progressive enhancement ## Patterns - State: React Context for simple, Zustand/Jotai for complex, Redux only when justified. Server state: TanStack Query or SWR, not raw `useEffect`. Forms: React Hook Form or Formik with Zod/Yup. Routing: the framework router. Styling: CSS Modules, Tailwind, or styled-components — consistent with the project. Errors: boundaries per route/feature, toasts for recoverable errors ## Common Pitfalls - Don't use `any` — use `unknown` and narrow, or define proper types - Don't mutate state directly — return new references - Don't fetch in useEffect without cleanup — use a data fetching library - Don't skip `key` props on lists or use array index as key for dynamic