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.

3. 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.

4. 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.

6. Error Boundaries

• Critical UI parts MUST have an <ErrorBoundary>.
• Async components (Suspense) must handle loading states gracefully.