Frontend Mastery Protocol (React + Vite + Tailwind)

1. Performance "Pro" Checklist

Before submitting any UI component, verify:

• Re-renders: Are we re-rendering unnecessarily? Use React.memo or useCallback for stable props.
• Lazy Loading: Are strict routes lazy-loaded? (React.lazy)
• Image Optimization: Are images using proper formats (WebP/AVIF) and loading="lazy"?
• Zustand Selectors: Are we selecting only what we need?
  • ❌ const { user, token } = useAuthStore()
  • ✅ const user = useAuthStore((s) => s.user)
• Bundle Size: Did we import a huge library for one function? (e.g. import lodash vs lodash/debounce)

2. State Management Rules (Zustand + React Query)

• Server State: MUST use React Query.
  • NEVER store server data in global Zustand store manually (unless caching for UI sync).
  • Use staleTime and cacheTime appropriately.
• Client State: Use Zustand for global, useState for local.
  • Avoid "Prop Drilling" > 2 levels. Use Context or Zustand.