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)