starting point

Author: bradwestfall

react/advanced-hooks/05-optimistic-ui/lecture/App.tsx

@@ -1,8 +1,9 @@
 import { useOptimistic, useState, useTransition } from 'react'
 import { type ResponseData, updateDatabase } from './helpers/mockServer'
 
-// Remember that useOptimistic will not work with <form onSubmit />, and requires
-// <form action />
+// Big takeaways:
+// 1. Homegrown optimistic state works with onSubmit, not with actions
+// 2. useOptimistic works with actions, not on submit
 
 export function App() {
   const [error, setError] = useState('')
@@ -13,6 +14,7 @@ export function App() {
 
     const data = (await updateDatabase(likes + 1).then((r) => r.json())) as ResponseData
     setLikes(data.likes)
+
     console.log(data.likes)
 
     if (data.error) {
@@ -32,7 +34,7 @@ export function App() {
   )
 }
 
-// // Step Two: home-made optimistic UI with transitions
+// // Step Two: home-made optimistic UI
 // export function App() {
 //   const [error, setError] = useState('')
 //   const [likes, setLikes] = useState(0)
@@ -43,12 +45,11 @@ export function App() {
 //   async function submit(e: React.FormEvent) {
 //     e.preventDefault()
 
-//     startTransition(() => {
-//       setOpLikes(opLikes + 1)
-//     })
+//     setOpLikes(opLikes + 1)
 
 //     const data = (await updateDatabase(opLikes + 1).then((r) => r.json())) as ResponseData
 //     setLikes(data.likes)
+
 //     console.log(data.likes)
 
 //     if (data.error) {

react/advanced-hooks/05-optimistic-ui/lecture/NOTES.md

@@ -3,8 +3,7 @@
 Start with a basic form submission that asynchronously updates likes:
 
 1. Add our own implementation of `optimisticLikes` with `useState`. Notice how
-   `likes` becomes useless / unused. We set it but nothing uses it. Also re-factor
-   to use transitions. See commented solution in App.tsx
+   `likes` becomes useless / unused. We set it but nothing uses it.
 
 2. Refactor `onSubmit={submit}` to `action={action}` and now the homegrown optimistic likes
    don't work.