rsc optimistic updates

Author: KevinVandy

apps/7-nextjs-rsc/package.json

@@ -14,14 +14,14 @@
  "@tabler/icons-react": "^3.13.0",
  "mantine-react-table": "^2.0.0-beta.6",
  "next": "14.2.6",
- "react": "^18",
- "react-dom": "^18"
+ "react": "19.0.0-rc-b57d2823-20240822",
+ "react-dom": "19.0.0-rc-b57d2823-20240822"
  },
  "devDependencies": {
  "@next/bundle-analyzer": "^14.2.6",
  "@types/node": "^22",
- "@types/react": "^18",
- "@types/react-dom": "^18",
+ "@types/react": "^18.3.4",
+ "@types/react-dom": "^18.3.0",
  "postcss": "^8.4.41",
  "postcss-preset-mantine": "1.17.0",
  "postcss-simple-vars": "^7.0.1",

apps/7-nextjs-rsc/src/api-types.ts

@@ -35,4 +35,5 @@ export interface IComment {
  name: string;
  email: string;
  body: string;
+ sending?: boolean;
 }

apps/7-nextjs-rsc/src/app/layout.tsx

@@ -1,5 +1,5 @@
 import "@mantine/core/styles.css";
-import React, { Suspense } from "react";
+import React from "react";
 import { MantineProvider, ColorSchemeScript } from "@mantine/core";
 import { theme } from "../theme";
 import { AppLayout } from "@/components/AppLayout";

apps/7-nextjs-rsc/src/app/posts/[id]/CommentForm.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { IComment } from "@/api-types";
+import {
+ ActionIcon,
+ Button,
+ Card,
+ Loader,
+ Stack,
+ Text,
+ Textarea,
+ Title,
+} from "@mantine/core";
+import { IconTrash } from "@tabler/icons-react";
+import { deleteComment, submitPostComment } from "./actions";
+import { useState, useOptimistic, useRef, LegacyRef } from "react";
+import { useFormStatus } from "react-dom";
+
+interface CommentSectionProps {
+ comments: IComment[];
+ postId: number;
+}
+
+export default function CommentSection({
+ comments,
+ postId,
+}: CommentSectionProps) {
+ const [commentText, setCommentText] = useState("");
+ const { pending: isPostingComment } = useFormStatus();
+
+ const formRef = useRef<HTMLFormElement>();
+
+ // wrap our submitPostComment server action with client side optimistic update logic
+ async function optimisticallyPostComment(formData: FormData) {
+ addOptimisticComment({
+ postId,
+ id: 0,
+ name: formData.get("name") as string,
+ email: formData.get("email") as string,
+ body: formData.get("body") as string,
+ sending: true,
+ });
+ formRef.current?.reset();
+ await submitPostComment(formData);
+ }
+
+ const [optimisticComments, addOptimisticComment] = useOptimistic(
+ comments,
+ (currentComments: IComment[], newComment: IComment) => {
+ return [...currentComments, newComment];
+ }
+ );
+
+ return (
+ <Stack gap="xl">
+ {optimisticComments?.map((comment) => (
+ <Card
+ opacity={comment.sending ? 0.5 : 1}
+ withBorder
+ key={comment.id + comment.email}
+ >
+ {comment.email === "user@mailinator.com" ? (
+ <ActionIcon
+ color="red"
+ pos="absolute"
+ right={10}
+ top={10}
+ variant="subtle"
+ onClick={() => deleteComment(comment)}
+ >
+ <IconTrash />
+ </ActionIcon>
+ ) : null}
+ <Title order={4}>{comment.name}</Title>
+ <Title order={5}>{comment.email}</Title>
+ <Text>{comment.body}</Text>
+ </Card>
+ ))}
+ <form
+ action={optimisticallyPostComment}
+ ref={formRef as LegacyRef<HTMLFormElement>}
+ >
+ <Stack gap="md">
+ <input type="hidden" name="postId" value={postId} />
+ <input type="hidden" name="email" value="user@mailinator.com" />
+ <input type="hidden" name="name" value="User" />
+ <Textarea
+ value={commentText}
+ onChange={(event) => setCommentText(event.currentTarget.value)}
+ name="body"
+ disabled={isPostingComment}
+ label="Post a Comment"
+ />
+ <Button
+ type="submit"
+ leftSection={
+ isPostingComment ? (
+ <Loader variant="oval" color="white" size="xs" />
+ ) : null
+ }
+ >
+ Post Comment
+ </Button>
+ </Stack>
+ </form>
+ </Stack>
+ );
+}

apps/7-nextjs-rsc/src/app/posts/[id]/CommentSection.tsx

@@ -1,8 +1,7 @@
-import { Box, Card, Flex, Stack, Text, Title } from "@mantine/core";
+import { Box, Flex, Stack, Text, Title } from "@mantine/core";
 import { IComment, IPost, IUser } from "../../../api-types";
 import Link from "next/link";
-import CommentForm from "./CommentForm";
-import DeleteCommentButton from "./DeleteCommentButton";
+import CommentSection from "./CommentSection";
 
 const fetchPostAndComments = async (postId: number) => {
  const [post, comments] = await Promise.all([
@@ -22,14 +21,18 @@ const fetchPostAndComments = async (postId: number) => {
  };
 };
 
+interface PostPageProps {
+ params: { id: string };
+}
+
 // Server Component
-export default async function PostPage({ params }: { params: { id: string } }) {
+export default async function PostPage({ params }: PostPageProps) {
  const { id: postId } = params;
 
  const { post, user, comments } = await fetchPostAndComments(+postId);
 
  return (
- <Stack>
+ <Stack mb="500px">
  <Box>
  <Title order={1}>Post: {post?.id}</Title>
  <Title order={2}>{post?.title}</Title>
@@ -48,19 +51,8 @@ export default async function PostPage({ params }: { params: { id: string } }) {
  Comments on this Post
  </Title>
  </Flex>
- <Stack gap="xl">
- {comments?.map((comment) => (
- <Card withBorder key={comment.id + comment.email}>
- {/* Client Component */}
- <DeleteCommentButton comment={comment} />
- <Title order={4}>{comment.name}</Title>
- <Title order={5}>{comment.email}</Title>
- <Text>{comment.body}</Text>
- </Card>
- ))}
- {/* Client Component */}
- <CommentForm postId={+postId} />
- </Stack>
+ {/* Client Component */}
+ <CommentSection comments={comments} postId={post.id} />
  </Stack>
  );
 }