MEDIUMArchitecturemediumNext.js + Supabase Standards

Use SWR or React Query for client-side real-time data

For data that changes frequently (notifications, dashboards), use SWR or React Query instead of manual useEffect + fetch.

Why This Matters

Manual useEffect + useState + fetch patterns require re-implementing caching, revalidation, error handling, and loading states that SWR handles automatically.

Related Rules

Use route groups to organize app sections

Architecture

HIGH

Colocate page files with their route segment

Architecture

MEDIUM

Use (select auth.uid()) instead of auth.uid() in policies

Performance

MEDIUM

Use kebab-case for file and directory names

Quality

MEDIUM

Catch this automatically on every PR

BeforeMerge scans your pull requests against this rule and 3+ others. Get actionable feedback before code ships.

Join Waitlist Browse All Rules

Why This Matters

SWR and React Query provide:

Automatic caching and deduplication
Revalidation on focus, interval, or mutation
Optimistic updates for instant UI feedback
Error retry with exponential backoff

Good

"use client"
import useSWR from "swr"
 
const fetcher = (url: string) => fetch(url).then(r => r.json())
 
export function NotificationBell() {
  const { data, error, isLoading } = useSWR("/api/notifications", fetcher, {
    refreshInterval: 30000,
  })
  // ...
}

Bad

"use client"
export function NotificationBell() {
  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(true)
  useEffect(() => {
    const interval = setInterval(() => {
      fetch("/api/notifications")
        .then(r => r.json())
        .then(setData)
        .finally(() => setLoading(false))
    }, 30000)
    return () => clearInterval(interval)
  }, [])
}

Use SWR or React Query for client-side real-time data

Why This Matters

Tags

Related Rules

Catch this automatically on every PR

Why This Matters

Good

Bad