better starting point

Author: bradwestfall

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

@@ -3,7 +3,9 @@ import { type ResponseData, updateDatabase } from './helpers/mockServer'
 
 // Big Takeaways
 // 1. Homegrown optimistic state works with onSubmit, not with actions
-// 2. useOptimistic works with actions, not on submit
+//    Plus it's hard to reconcile errors (see notes)
+// 2. useOptimistic works with actions, not on submit unless we wrap our own transition
+//    Refactor back to onSubmit, see error about transitions, add transition and it works
 
 export function App() {
   const [error, setError] = useState('')

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

@@ -3,38 +3,17 @@
 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.
+   `likes` becomes useless / unused. We set it but nothing uses it. We can also see
+   it becomes difficult to reconcile our optimistic likes and the real likes when
+   there's an error.
 
-2. Refactor `onSubmit={submit}` to `action={action}` and now the homegrown optimistic likes
-   don't work.
+2. Refactor `onSubmit={submit}` to `action={action}` and now the homegrown optimistic
+   likes don't work. Switching to `useOptimistic` will work though since it's made to
+   work with form actions.
 
-3. Refactor to useOptimistic, a hook that appears to be designed for form actions:
+3. With useOptimistic, go back to `onSubmit={submit}` and it wont work. It's nice to show
+   the console because it will say we can't do `useOptimistic` without a transition (which
+   is what actions were giving us). We can add `startTransition` though if we want it to
+   work with `onSubmit`
 
-```ts
-const [error, setError] = useState('')
-const [likes, setLikes] = useState(0)
-
-const [optimisticLikes, setOptimisticLikes] = useOptimistic(
-  likes,
-  (currentLikes, newOptimisticLikes: number) => {
-    return newOptimisticLikes
-  }
-)
-
-async function action() {
-  setOptimisticLikes(optimisticLikes + 1)
-  const data = (await updateDatabase(optimisticLikes + 1).then((r) => r.json())) as ResponseData
-
-  if (!data.error) {
-    console.log(data.likes)
-    setLikes(data.likes)
-  } else {
-    setLikes(data.likes)
-    setError(data.error)
-  }
-}
-```
-
-4. Now with useOptimistic, if we go back and re-factor to `onSubmit={submit}`, we can see a warning:
-
-Warning: An optimistic state update occurred outside a transition or action. To fix, move the update to an action, or wrap with startTransition.
+"Warning: An optimistic state update occurred outside a transition or action. To fix, move the update to an action, or wrap with startTransition."