transitions

Author: btholt

lessons/05-performance-optimizations/A-where-react-can-be-slow.md

@@ -0,0 +1,9 @@
+You know how your remote has those buttons for streaming services on it? Have you ever accidentally pressed "Uncle Pete's Streaming Service" instead of "Netflix" and it takes forever to load and you're held hostage to the unoptimized loading of their crappy app? Really frustrating, right?
+
+Now think of that happening on a website you've been on – you have several options to pick from and you accidentally chosoe the wrong one, and now you have to wait for the UI to be interactive again for you to be able to correct your mistake. Really annoying, especially on slower sites, slower connections and/or slower devices.
+
+This is what transitions are for in React. They allow you to keep UIs interactive while loading is happening behind the scene.
+
+We're going to build a little app that shows sports scores with an intentionally slow API. We're going to make it so users who accidentally select the wrong score to look at can still select a new game even while others are loading in the background.
+
+Most React apps in the past would have just locked the user out of being able to make new choices while data is loading - it's the easy way to code this up. But with the `useTransition` hook, this became pretty easy to do. Let's do it.

lessons/06-transitions/A-what-are-transitions.md

@@ -0,0 +1,13 @@
+We're making a little scoreboard project, let's familiar ourselves with it.
+
+[Start with the transitions][folder]. The complete solution is in the [transitions-complete][complete] folder if you need to reference it.
+
+- Run `npm install`
+- It's a plain ol' Vite project. No server side anything. You can do transitions with servers, we just don't need to.
+- There's plain little Node.js server that just allow you to request the score of games 1 through 5. It doesn't do anything else.
+- Run `npm run dev:server` in one terminal and `npm run dev:client` in another. One runs Vite and one runs the Node.js server.
+- Vite will proxy the Node.js server from port 3000 to port 5173 so you can call localhost:5173/score?game=1 - all same origin
+- Everything else is a pretty standard React project.
+
+[folder]:
+[complete]:

lessons/06-transitions/B-the-project.md

@@ -0,0 +1,93 @@
+Let's first make this "wrong" first - the problem where the UI locks up during transitional times.
+
+Let's make a Score.jsx file
+
+```javascript
+export default function Score({ isPending, home, away, game }) {
+  return (
+    <div className="score">
+      <div>
+        <h2>HOME {game}</h2>
+        <h3>{isPending ? "–" : home}</h3>
+      </div>
+      <div>
+        <h2>AWAY {game}</h2>
+        <h3>{isPending ? "–" : away}</h3>
+      </div>
+    </div>
+  );
+}
+```
+
+- Key here is that if the score is pending, we show a dash. That will visually indicate to the user we haven't loaded it yet.
+
+Okay, let's make a quick function fetch from the API. Make a file called getScore.js
+
+```javascript
+export default async function getScore(game) {
+  const response = await fetch("/score?game=" + game);
+  const score = await response.json();
+  return score;
+}
+```
+
+No surprises here.
+
+Let's go modify our App.jsx. Put this in there
+
+```javascript
+import { useState, useEffect } from "react";
+import Score from "./Score";
+import getScore from "./getScore";
+
+export default function App() {
+  const [isPending, setIsPending] = useState(true);
+  const [game, setGame] = useState(1);
+  const [score, setScore] = useState({ home: "–", away: "–" });
+
+  async function getNewScore(game) {
+    setIsPending(true);
+    setGame(game);
+    const newScore = await getScore(game);
+    setScore(newScore);
+    setIsPending(false);
+  }
+
+  useEffect(() => {
+    getNewScore(game);
+  }, []);
+
+  return (
+    <div className="app">
+      <h1>Game {game}</h1>
+      <select
+        disabled={isPending}
+        onChange={(e) => {
+          getNewScore(e.target.value);
+        }}
+      >
+        <option value={1}>Game 1</option>
+        <option value={2}>Game 2</option>
+        <option value={3}>Game 3</option>
+        <option value={4}>Game 4</option>
+        <option value={5}>Game 5</option>
+      </select>
+      <div className={`loading-container ${isPending ? "loading" : ""}`}>
+        {" "}
+        <span className="spinner">⚽️</span>
+      </div>
+      <div>
+        <Score
+          isPending={isPending}
+          game={game}
+          home={score.home}
+          away={score.away}
+        />
+      </div>
+    </div>
+  );
+}
+```
+
+- So this works, and this is how most people would have coded this - just wait until the API request finishes.
+- Why do we need to disable the select while stuff is loading? Because if we don't people can make multiple requests in that time, and they'll return in a jumbled order and it'll freak people out. We have to make sure it finsihes it first so we don't have a UI that's responding to old requests.

lessons/06-transitions/C-making-it-work-without-transitions.md

@@ -0,0 +1,27 @@
+Luckily the useTransition code is only slightly more complex.
+
+```javascript
+// add useTransition at top
+import { useState, useTransition, useEffect } from "react";
+
+// replace isPending useState
+const [isPending, startTransition] = useTransition();
+
+// replace getNewScore
+async function getNewScore(game) {
+  setGame(game);
+  startTransition(async () => {
+    const newScore = await getScore(game);
+    startTransition(() => {
+      setScore(newScore);
+    });
+  });
+}
+```
+
+That's it!
+
+- startTransition gives you back a isPending flag just like we had before.
+- It now gives us a function to call that we're starting our UI transiton. We're essentially signalling to React that we're starting some sort of transition (in our case, an API request and a subsequent UI render) that we could elect to interrupt with another transition.
+- Why two `startTransition` calls? I struggled with this as well. It's in the React docs. It's because in theory React updates aren't instant. If you're a Facebook-sized app, a React update can actually be on the order tens if not hundreds of milliseconds which is forever in terms of code execution, and this means it needs to be captured this way so that the use could in theory interrupt it after the API request has returned but while React is re-rendering.
+- I'll say _in this particular case_ it's unnecessary, our app is tiny. But it's to make sure each transition is captured an atomic bit that can be interrupted.

lessons/06-transitions/D-making-it-work-with-transitions.md

@@ -0,0 +1,3 @@
+---
+title: "Congrats!"
+---