deferred values

Author: btholt

lessons/07-optimistic-values/A-what-are-optimistic-values.md

@@ -0,0 +1,11 @@
+Let's say you are texting your friend. You open iMessage, WhatsApp, Signal, ICQ, AIM, MSN Messenger etc. What is the actual order of operations?
+
+1. You type your message
+1. You click send
+1. The message shows up in the log of messages _(this is the one we're interested in)_
+1. The message is actually sent over the network
+1. The recepient receives it
+
+That #3 is interesting - you get visual feedback in your log of messages as if the message was already sent. In your mind, the message is sent, and the UI reflects that. In reality the message hasn't even left the device when it's first rendered that way, so in some ways it's a bit misleading, but this **optimistic** display of UI is more closely reflects the user's mental model.
+
+That's what we're talking about, optimsitic UI updates - we're doing some backend work behind the scenes, but we're going to optimistically show the user that their update was done. This is possible to do without the ready-made hook `useOptimisticValue` but it was such a pain before. Now it's fairly easy to use in conjunction with useTransition (necessary to identify a low priority re-render) to show an intermediary state.

lessons/07-optimistic-values/B-the-project.md

@@ -0,0 +1,78 @@
+Let's open the project.
+
+1. Open optimisitic folder in your editor of choice
+1. Run `npm install`
+1. Glance at server.js - it responds to GET and POST on /thoughts
+1. Run `npm run dev:server` to run the server
+1. Run `npm run dev:client` in another terminal window to run the Vite server
+
+You'll notice two things here in the server.js file, the DELAY and the ERROR_RATE. I intentionally slowed down the POST request so you can see how the loading state works. Feel free to change how long the delay is (it's in milliseconds). I also wanted you to see what errors look like, so it fails 20% of the time, this is also configurable.
+
+Okay, let's build a UI that shows users deep thoughts, and allow them to post their own. In App.jsx, put
+
+```javascript
+import { useEffect, useState } from "react";
+
+export default function App() {
+  const [thoughts, setThoughts] = useState([]);
+  const [thought, setThought] = useState("");
+
+  async function postDeepThought() {
+    setThought("");
+    const response = await fetch("/thoughts", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ thought }),
+    });
+    if (!response.ok) {
+      alert("This thought was not deep enough. Please try again.");
+      return;
+    }
+    const { thoughts: newThoughts } = await response.json();
+    setThoughts(newThoughts);
+  }
+
+  useEffect(() => {
+    fetch("/thoughts")
+      .then((res) => res.json())
+      .then((data) => {
+        setThoughts(data);
+      });
+  }, []);
+
+  return (
+    <div className="app">
+      <h1>Deep Thoughts</h1>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          postDeepThought();
+        }}
+      >
+        <label htmlFor="thought">What's on your mind?</label>
+        <textarea
+          id="thought"
+          name="thought"
+          rows="5"
+          cols="33"
+          value={thought}
+          onChange={(e) => setThought(e.target.value)}
+        />
+        <button type="submit">Submit</button>
+      </form>
+      <ul>
+        {thoughts.map((thought, index) => (
+          <li key={thought}>{thought}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+```
+
+- Nothing surprising here. We get thoughts on load, and we reload them on POST
+- The big issue here is that the user is shown no feedback while the POST happening.
+- We could just append to thoughts and hope for the best - and this is what we used to do.
+- However we can use `useOptimisticState` and get a lot of the error cases and other problems wrapped up and taken care of for us.

lessons/08-deferred-values/A-what-are-deferred-values.md

@@ -0,0 +1,11 @@
+What happens if you have expensive (i.e. computationally difficult) components that need to re-render frequently? If you don't do something about it, it'll cause the infamous bad actor of frontend UIs: the dreaded **JANK** 👻
+
+So how can we handle this? You have a UI that's getting all sorts of new input and we need to re-render at _some_ interval, but it'd be great if we could slow it down a bit so we don't get a janky UI - we just slow down the parts we need so that we don't cause the rest of the UI to hang.
+
+So let's fathom our project : you and I are building an image editor that happens all client-side. We are tasked with building the filter side of it, so users can adjust brightness, saturation, sepia-tone, contract, and blur.
+
+> We're going to have to simulate jank as we're going to use CSS instead of actual image processing, and the browser is too good at applying CSS 😅. But in reality if we were trying to actual image processing in the browser, jank would be a real concern.
+
+You'll see a place where jank is frequently introduced - where we're talking user input and applying the values to UI elements. The browser measures so frequently that it becomes an issue.
+
+The other thing we want: if you have a fast device, we want it to render more frequently, and if you have an old device (or low battery!) want it to render way less frequently. This is _very_ hard to do without hooking into React itself to accomplish.

lessons/08-deferred-values/B-the-project.md

@@ -0,0 +1,132 @@
+Open the `deferred` project from our repo.
+
+Let's hop into our src directory and create a Slider.jsx file.
+
+```javascript
+export default function Slider({ value, deferred, onChange, name, max }) {
+  return (
+    <li className="slider">
+      <label htmlFor={name}>
+        {name}
+        {value !== deferred ? " (Updating)" : ""}
+      </label>
+      <input
+        type="range"
+        id={name}
+        name={name}
+        min="0"
+        max={max}
+        value={value}
+        onChange={onChange}
+      />
+      <output htmlFor={name}>
+        Actual Value: {value} | Deferred Value: {deferred}
+      </output>
+    </li>
+  );
+}
+```
+
+- This is what we're going to use gather user input for what values they want applied to their image.
+- This is how you tell that something is in a inbetween state - deferred and value will be different. You'll see in just a sec.
+
+Let's go create the image it will be applied to: DisplayImage.jsx
+
+```javascript
+import img from "../images/luna.jpg";
+
+const JANK_DELAY = 100;
+
+export default function DisplayImage({ filterStyle }) {
+  const expensiveRender = () => {
+    const start = performance.now();
+    while (performance.now() - start < JANK_DELAY) {}
+    return null;
+  };
+
+  return (
+    <>
+      {expensiveRender()}
+      <img src={img} alt="Luna" style={{ filter: filterStyle }} />
+      <p>Last render: {Date.now()}</p>
+    </>
+  );
+}
+```
+
+- Beyond that it's just going to render of image (in my case it's my lovely asshole dog Luna, feel free to use your own!!)
+- Why the date? I want you to be able to see how frequently that image gets re-rendered.
+- expensiveRender is masquerading as a component with its return null.
+- What it's really doing is just slowing itself down 100ms intentionally so it can simulate jank well.
+- Feel free to modify `JANK_DELAY` to simulate speeding up and slowing down your rendering. 100ms was what I needed to notice big jank on my Macbook Air. Yours may be different.
+
+Okay, now head to App.jsx
+
+```javascript
+import { useState } from "react";
+import Slider from "./Slider";
+import DisplayImage from "./DisplayImage";
+
+export default function App() {
+  const [blur, setBlur] = useState(0);
+  const [brightness, setBrightness] = useState(100);
+  const [contrast, setContrast] = useState(100);
+  const [saturate, setSaturate] = useState(100);
+  const [sepia, setSepia] = useState(0);
+
+  const filterStyle = `
+    blur(${blur}px)
+    brightness(${brightness}%)
+    contrast(${contrast}%)
+    saturate(${saturate}%)
+    sepia(${sepia}%)
+    `;
+
+  return (
+    <div className="app">
+      <h1>Deferred Value</h1>
+      <DisplayImage filterStyle={filterStyle} />
+      <ul>
+        <Slider
+          value={blur}
+          deferred={blur}
+          onChange={(e) => setBlur(e.target.value)}
+          name="Blur"
+          max="20"
+        />
+        <Slider
+          value={brightness}
+          deferred={brightness}
+          onChange={(e) => setBrightness(e.target.value)}
+          name="Brightness"
+          max="200"
+        />
+        <Slider
+          value={contrast}
+          deferred={contrast}
+          onChange={(e) => setContrast(e.target.value)}
+          name="Contrast"
+          max="200"
+        />
+        <Slider
+          value={saturate}
+          deferred={saturate}
+          onChange={(e) => setSaturate(e.target.value)}
+          name="Saturate"
+          max="200"
+        />
+        <Slider
+          value={sepia}
+          deferred={sepia}
+          onChange={(e) => setSepia(e.target.value)}
+          name="Sepia"
+          max="100"
+        />
+      </ul>
+    </div>
+  );
+}
+```
+
+- Now we can see something rendered. Notice it's _super_ janky.
+- You'll notice that DisplayImage is re-rendering 100% of the time. This is because we haven't memoized it and also filterStyle is changing every time a slider is. When props change, a component will always re-render, memoized or not.

lessons/08-deferred-values/C-making-it-less-janky.md

@@ -0,0 +1,78 @@
+So how can we make things less janky?
+
+In the past we have to use something like [throttle or debounce][throttle] - we'd limit how frequently we'd allow the functions to update. This works but it's a blunt instrument - it's complicated code (I have to look up debounce vs throttle every time) and it doesn't scale with the user's device. Slow and fast devices alike will get slowed down.
+
+Enter `useDeferredValue`. It uses React's low priority rendering to say "hey, if you're still busy doing high priority stuff, feel free to delay changing this low priority stuff" to React. What's cool about that is this _will_ scale with the user's device. A fast device will chew through updates quickly and get to the low priority updates quickly while a slower device will be given space to sort through high priority updates and wait for the lower ones.
+
+Let's make it happen.
+
+```javascript
+// replace filterStyles
+const deferredBlur = useDeferredValue(blur);
+const deferredBrightness = useDeferredValue(brightness);
+const deferredContrast = useDeferredValue(contrast);
+const deferredSaturate = useDeferredValue(saturate);
+const deferredSepia = useDeferredValue(sepia);
+
+const filterStyle = `
+  blur(${deferredBlur}px)
+  brightness(${deferredBrightness}%)
+  contrast(${deferredContrast}%)
+  saturate(${deferredSaturate}%)
+  sepia(${deferredSepia}%)`;
+
+
+// change deferred
+<Slider
+  value={blur}
+  deferred={deferredBlur}
+  onChange={(e) => setBlur(e.target.value)}
+  name="Blur"
+/>
+<Slider
+  value={brightness}
+  deferred={deferredBrightness}
+  onChange={(e) => setBrightness(e.target.value)}
+  name="Brightness"
+/>
+<Slider
+  value={contrast}
+  deferred={deferredContrast}
+  onChange={(e) => setContrast(e.target.value)}
+  name="Contrast"
+/>
+<Slider
+  value={saturate}
+  deferred={deferredSaturate}
+  onChange={(e) => setSaturate(e.target.value)}
+  name="Saturate"
+/>
+<Slider
+  value={sepia}
+  deferred={deferredSepia}
+  onChange={(e) => setSepia(e.target.value)}
+  name="Sepia"
+/>
+```
+
+- We still have jank - that's expected, we have a 200ms delay chucked into our code. But it's working _much_ better than it was.
+- There's probably a clever way to just useDeferredValue with just the filterStyle or other things - notice it's deferred **value** and not deferred **state** - you can use it with any value.
+
+Let's take it one step further. As long as a deferred value hasn't changed, that means the filterStyle string hasn't changed. Using `memo` like we learned before allows us to prevent the notorious jank-inducer `expensiveRender` from running. Let's go do that.
+
+In DisplayImage
+
+```javascript
+import { memo } from "react";
+
+export default memo(function DisplayImage({ filterStyle }) {
+  // other code here
+});
+```
+
+- So much less jank
+- Now watch that `Last render` value - notice it doesn't change until the deferred value catches up
+
+That's it! Using our new tools we can even work around heavy computation by using a little help from the React scheduler!
+
+[throttle]: https://css-tricks.com/debouncing-throttling-explained-examples/