Show advanced patterns import { useState, useTransition, useOptimistic } from 'react' import { deletePost, toggleLike, updatePost } from '@/app/actions' // Basic client-side call export function DeleteButton({ postId }: { postId: string }) { const [isPending, startTransition] = useTransition() return ( ) } // With error handling export function SaveButton({ postId, content }: { postId: string, content: string }) { const [error, setError] = useState(null) const [isPending, startTransition] = useTransition() const handleSave = () => { startTransition(async () => { try { setError(null) await updatePost(postId, content) } catch (err) { setError(err.message) } }) } return (

{error &&

{error}

}

) } // Optimistic updates export function LikeButton({ postId, initialLikes, isLiked }: { postId: string initialLikes: number isLiked: boolean }) { const [optimisticLikes, addOptimisticLike] = useOptimistic( { count: initialLikes, liked: isLiked }, (state) => ({ count: state.liked ? state.count - 1 : state.count + 1, liked: !state.liked }) ) async function handleLike() { addOptimisticLike(null) await toggleLike(postId) } return ( ) }

Client-side Server Actions

More Next.js tasks