frontend-engineering-edho-ferdian

Walk a five-rung ladder from the top: component-local useState first, lift to the nearest common parent only when a second component needs it, Context only when drilling crosses 3+ levels, an external store like Zustand for cross-route state, and a server-state library like TanStack Query whenever the source of truth is a server.

Use await fetch directly in Next.js Server Components, TanStack Query or SWR for client-side caching and mutations, or the React 19 use() hook with a Suspense boundary to read promises during render. The useEffect plus fetch pattern lacks caching, deduplication, and race-condition handling.

HeroUI is an npm package of pre-styled React Aria components themed via Tailwind config, best for shipping a consistent accessible UI quickly. shadcn/ui copies component source into your repo for full ownership, suiting projects that need deep customization or zero runtime UI dependencies.

Hydration mismatches happen when the server renders opacity 1 but the client's initial prop says opacity 0. Guard with a mounted state flag so initial matches the server render, and always add the use client directive to files importing from motion/react.

Do not use it to review existing code or diffs — that belongs to a code review skill that produces findings with severities. It also does not cover WCAG compliance auditing, security review, or build type-checking failures, which are owned by separate review skills.

Trap focus inside the modal while open, restore focus to the triggering element on close, close on Escape, and add role dialog with aria-modal true. Animate the overlay and panel as two coordinated layers, and respect prefers-reduced-motion with an opacity-only fallback.