docs: finalize initial draft

content/blog/explaining-reacts-cache-function/index.md

@@ -254,14 +254,45 @@ By doing this, our objective is that our theme will have been generated by the t
 
 While this advice is less/not useful for synchronous tasks, you're able to use `cache` to get async results as well, where this would be much more handy:
 
-```jsx
+```jsx {0,2-4,7,19}
+import { cache, use } from "react";
+
+const getMovie = cache(async (id) => {
+  return await db.movie.get(id);
+}
+
+async function MovieDetails({id}) {
+  const movie = use(getMovie(id));
+  return (
+    <section>
+      <h1>{movie.title}</h1>
+      <img src={movie.poster} />
+      <ul>{movie.actors.map(actor => <li key={actor.id}>{actor.name}</li>)}</ul>
+    </section>
+  );
+}
+
+function MoviePage({id}) {
+  // Pre-fetch data before we render the details itself
+  getMovie(id);
+
+  // ...
+
+  return (
+    <>
+      <MovieDetails id={id} />
+    </>
+  );
+}
 ```
 
-This is a pattern you'll often see with asynchronous server components.
+This is a pattern you'll often see with asynchronous server components as well as [the new `use` Hook in React](https://react.dev/reference/react/use).
 
 ## Errors are memoized in `cache` {#errors-cache}
 
-```jsx
+Returned results aren't the only thing that the `cache` function memoizes and returns to users of the API; it also caches errors thrown in the inner function:
+
+```jsx {0-5,10}
 const getIsEven = cache((number) => {
   alert("I am checking if " + number + " is even or not");
   if (number % 2 === 0) {
@@ -276,4 +307,39 @@ function ThrowAnErrorIfEven({ number, instance }) {
 
   return <p>I am instance #{instance}</p>;
 }
+
+function App = () => {
+    const [counter, setCounter] = useState(0);
+
+    return (
+        <div>
+            <p>You should only see one alert when you push the button below</p>
+			<button onClick={() => setCounter((v) => v + 1)}>Add to {counter}</button>
+            <ErrorBoundary>
+                <ThrowAnErrorIfEven number={counter} instance={1} />
+            </ErrorBoundary>
+            <ErrorBoundary>
+                <ThrowAnErrorIfEven number={counter} instance={2} />
+            </ErrorBoundary>
+            <ErrorBoundary>
+                <ThrowAnErrorIfEven number={counter} instance={3} />
+            </ErrorBoundary>
+            <ErrorBoundary>
+                <ThrowAnErrorIfEven number={counter} instance={4} />
+            </ErrorBoundary>
+        </div>
+    )
+}
 ```
+
+# Conclusion
+
+This has been a fun look into an upcoming API from the React core team; `cache`!
+
+While it's early days for the function, it's clear to me why it's such an integral API for them to add; it fits in wonderfully with their vision of data fetching and augmentation, especially in regards to async and server fetching.
+
+Speaking of, next time let's take a look at how React is adding data fetching to React's core APIs.
+
+Until next time!
+
+\- Corbin

content/blog/explaining-reacts-cache-function/react-cache-error/src/main.jsx

@@ -25,7 +25,7 @@ function App() {
 			{Array.from({ length: howManyInstances }).map((_, i) => (
 				<div key={i}>
 					<ErrorBoundary key={counter}>
-						<ThrowAnErrorIfEven key={i} number={counter} instance={i} />
+						<ThrowAnErrorIfEven number={counter} instance={i} />
 					</ErrorBoundary>
 				</div>
 			))}