audit-hooks

Auditing forbidden React hook usage detects direct database calls, raw fetch, and post-mutation reloads in Next.js client components. It then replaces them with useSWR for fetching and apiClient or serverApi for mutations to enforce safe client/server boundaries.

Using useAction from next-safe-action can cause stale UI because it bypasses safe cache invalidation. Replacing it with apiClient or serverApi mutations and applying mutate() ensures proper cache invalidation and prevents undefined data guardrail violations.

The best way to replace raw fetch calls is implementing useSWR for client data fetching. This pattern modernizes legacy codepaths, hardens client/server boundaries, and prevents stale UI by leveraging mutate() for safe cache invalidation.

Yes, you can detect direct @db usage in client components across your codebase. The audit identifies these forbidden patterns and replaces them with server components for server-side logic, ensuring scalable client/server boundaries.

The audit tool works directly with existing Next.js pages and client components. It scans these files to identify violations like raw fetch and post-mutation reloads, automatically applying fixes to align with SWR and serverApi usage.

You should not use raw fetch for API calls in React web development when building scalable Next.js apps. Raw fetch prevents safe cache invalidation; using useSWR with mutate() instead ensures proper data fetching and prevents stale UI.