Frontend Mastery Protocol (React + Vite + Tailwind)
- 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 )
- 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.
- Architectectural Patterns
-
Container/Presenter: Separate logic (Hooks) from View (JSX).
-
Complex components should have a custom hook (e.g., useComponentLogic.ts ).
-
Composition: Use children prop instead of passing components as props where possible.
-
Custom Hooks: Extract reusable logic immediately. useBoolean , useToggle , etc.
- Code Quality & Formatting
-
Naming: use[Action] for hooks, handle[Event] for handlers.
-
CSS (Tailwind):
-
Group layout (flex , grid ) first, then spacing, then visual (bg , text ).
-
Use clsx or tailwind-merge for conditional classes.
-
NO inline styles (style={{}} ) except for dynamic coordinates.
- Error Boundaries
-
Critical UI parts MUST have an <ErrorBoundary> .
-
Async components (Suspense) must handle loading states gracefully.