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.