There are three problems with the simplified example for useOptimistic in the React documentation. To better understand how the hook works, here’s how I'd move the demo into a Next.js 15 app, convert it to TypeScript, style it with Tailwind CSS, fix the UX problems, and store the submitted content in the Sanity Content Lake.
⬇️ Clone the repository:
https://github.com/SimeonGriggs/use-optimistic-nextjs-sanity
More Sanity learning courses:
1️⃣ Day One with Sanity Studio – https://www.sanity.io/learn/course/day-one-with-sanity-studio/prerequisites
🏗️ Work Ready Next.js – https://www.sanity.io/learn/track/work-ready-next-js
Chapters:
00:00 React docs example walkthrough
01:39 Create Next.js app
02:26 Convert example to TypeScript
06:55 Style with Tailwind CSS
08:42 Fix 1: Input maintains value
10:38 Fix 2: Filter out duplicate keys
16:01 Fix 3: Write messages to Sanity
16:37 Create Sanity Studio app
17:26 Create schema types
19:37 TypeGen, next-sanity, GROQ and Sanity Client
23:53 Dynamic routes for fetching Sanity content
27:21 Swap local state for Sanity Content
28:50 Write to Sanity from Next.js
34:10 Watching real-time mutations
