// ❌ The classic pattern — has at least four structural problems
function UserProfile({ userId }: { userId: string }) {
  const [user, setUser] = useState<User | null>(null)
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<Error | null>(null)

  useEffect(() => {
    setIsLoading(true)
    setError(null)
    fetch(`/api/users/${userId}`)
      .then((res) => res.json())
      .then((data) => {
        setUser(data)
        setIsLoading(false)
      })
      .catch((err) => {
        setError(err)
        setIsLoading(false)
      })
  }, [userId])

  if (isLoading) return <Spinner />
  if (error) return <ErrorMessage error={error} />
  if (!user) return null
  return <UserCard user={user} />
}

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'

// ✅ Same functionality as above — but correct
function UserProfile({ userId }: { userId: string }) {
  const { data: user, isLoading, isError, error } = useQuery({
    queryKey: ['users', userId],   // cache address — unique per userId
    queryFn: () => fetchUser(userId),
    staleTime: 5 * 60 * 1000,     // treat as fresh for 5 minutes
  })

  if (isLoading) return <Spinner />
  if (isError) return <ErrorMessage error={error} />
  if (!user) return null
  return <UserCard user={user} />
}

// Good queryKey design — from broad to specific
queryKey: ['users']                         // all users
queryKey: ['users', userId]                 // one specific user
queryKey: ['users', userId, 'posts']        // posts belonging to that user
queryKey: ['users', userId, 'posts', { filter: 'published' }]  // filtered subset

useQuery({
  queryKey: ['dashboard-stats'],
  queryFn: fetchDashboardStats,
  staleTime: 30_000,       // serve from cache for 30 seconds without revalidating
  gcTime: 5 * 60_000,      // keep in cache for 5 minutes after last subscriber unmounts
  refetchOnWindowFocus: true,  // revalidate when user returns to the tab
})

const queryClient = useQueryClient()

const updateUserMutation = useMutation({
  mutationFn: (updates: Partial<User>) => patchUser(userId, updates),

  // After a successful mutation, invalidate the user query so it refetches
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ['users', userId] })
  },
})

// In the component
<button onClick={() => updateUserMutation.mutate({ name: 'Bob' })}>
  Save
</button>

const toggleLikeMutation = useMutation({
  mutationFn: (postId: string) => togglePostLike(postId),

  onMutate: async (postId) => {
    // 1. Cancel any in-flight queries for this post (prevent overwrites)
    await queryClient.cancelQueries({ queryKey: ['posts', postId] })

    // 2. Snapshot the current cache value (for rollback)
    const previousPost = queryClient.getQueryData<Post>(['posts', postId])

    // 3. Apply the optimistic update
    queryClient.setQueryData<Post>(['posts', postId], (old) => ({
      ...old!,
      likedByMe: !old!.likedByMe,
      likeCount: old!.likedByMe ? old!.likeCount - 1 : old!.likeCount + 1,
    }))

    return { previousPost }  // passed to onError as context
  },

  onError: (_err, postId, context) => {
    // 4. Roll back to the snapshot on failure
    if (context?.previousPost) {
      queryClient.setQueryData(['posts', postId], context.previousPost)
    }
  },

  onSettled: (_, __, postId) => {
    // 5. Always revalidate after mutation (success or failure) to sync server truth
    queryClient.invalidateQueries({ queryKey: ['posts', postId] })
  },
})

import useSWR, { mutate } from 'swr'

const fetcher = (url: string) => fetch(url).then((r) => r.json())

function UserProfile({ userId }: { userId: string }) {
  const { data: user, error, isLoading } = useSWR(`/api/users/${userId}`, fetcher, {
    revalidateOnFocus: true,
    dedupingInterval: 2000,  // deduplicate requests within 2 seconds
  })

  if (isLoading) return <Spinner />
  if (error) return <ErrorMessage error={error} />
  return <UserCard user={user} />
}

// Invalidate by key
mutate(`/api/users/${userId}`)

// app/users/[id]/page.tsx — React Server Component
// This is an async function that runs on the server — no useEffect, no loading state
export default async function UserPage({ params }: { params: { id: string } }) {
  // Direct async/await — no hook, no client-side fetch
  const user = await fetchUser(params.id)

  // This component ships ZERO JavaScript to the client — it's HTML
  return (
    <main>
      <UserHeader user={user} />
      {/* Server Component can compose Client Components */}
      <InteractiveActions userId={user.id} />
    </main>
  )
}

// components/InteractiveActions.tsx — Client Component
'use client'

import { useState } from 'react'

// This component ships JavaScript — it has client-side interactivity
export function InteractiveActions({ userId }: { userId: string }) {
  const [isFollowing, setIsFollowing] = useState(false)
  return (
    <button onClick={() => setIsFollowing((f) => !f)}>
      {isFollowing ? 'Unfollow' : 'Follow'}
    </button>
  )
}

// app/actions.ts
'use server'

import { revalidatePath } from 'next/cache'

export async function updateUserAction(userId: string, data: Partial<User>) {
  await db.users.update({ where: { id: userId }, data })

  // Revalidate the cached page that renders this user
  revalidatePath(`/users/${userId}`)
}

// app/users/[id]/edit/page.tsx
'use client'
import { updateUserAction } from '@/app/actions'

export function EditUserForm({ user }: { user: User }) {
  return (
    <form action={updateUserAction.bind(null, user.id)}>
      <input name="name" defaultValue={user.name} />
      <button type="submit">Save</button>
    </form>
  )
}