improve instructions

Author: kentcdodds

exercises/04.context/01.problem.provider/README.mdx

@@ -1,9 +1,9 @@
 # Context Provider
 
-🧝‍♂️ I was refactoring things a bit and decided we shouldn't need to pass
-the `query` and `setSearchParams` as props. Instead I just wanted to call
-`useSearchParams` in each of the components that need them (there's only one
-URL afterall).
+🧝‍♂️ I was <PrevDiffLink>refactoring things</PrevDiffLink> a bit and decided we
+shouldn't need to pass the `query` and `setSearchParams` as props. Instead I
+just wanted to call `useSearchParams` in each of the components that need them
+(there's only one URL afterall).
 
 Well that didn't work. Turns out we now have multiple instances of the search
 params state and multiple subscriptions to the `popstate` event. That's not

exercises/04.context/02.problem.hook/README.mdx

@@ -1,8 +1,9 @@
 # Context Hook
 
 🧝‍♂️ I was playing around with the app and I realized that we have a default value
-for our context provider. So I thought maybe we could remove the context
-provider. Unfortunately that didn't work. Do you know why?
+for our context provider. So I thought maybe we
+could <PrevDiffLink>remove the context</PrevDiffLink> provider. Unfortunately
+that didn't work. Do you know why?
 
 👨‍💼 Yeah, it's because even though the `searchParams` are shared, they're not
 updated when calling `setSearchParams`. This is because the `searchParams`

exercises/05.portals/01.problem.create/README.mdx

@@ -3,10 +3,11 @@
 👨‍💼 Some of our users find the heart icon to be unclear and would like to have a
 tooltip that explains what it's for.
 
-🧝‍♂️ I've moved things around a little bit to reduce the amount of code you need
-to work in. I've also added a simple tooltip component that's not working quite
-yet. The positioning is all funny because the tooltip is being rendered within
-the context of the card instead of at the root of the document.
+🧝‍♂️ I've <PrevDiffLink>moved things around a little bit</PrevDiffLink> to reduce
+the amount of code you need to work in. I've also added a simple tooltip
+component that's not working quite yet. The positioning is all funny because the
+tooltip is being rendered within the context of the card instead of at the root
+of the document.
 
 👨‍💼 Thanks Kellie. Now, let's see if you can make the tooltip component work
 properly with a portal.

exercises/06.layout-computation/01.problem.layout-effect/README.mdx

@@ -16,7 +16,7 @@ That `height` is used to determine whether the tooltip should appear above or
 below the target element (the heart in our case).
 
 Kellie 🧝‍♂️ noticed on low-end devices, they're seeing a little flicker
-so <DiffLink app1={-1}>she's added</DiffLink> an arbitrary slowdown to our
+so <PrevDiffLink>she's added</PrevDiffLink> an arbitrary slowdown to our
 component to simulate that problem. To reproduce the problem, simply hover over
 a heart and you'll notice it starts at the bottom of the heart and then flickers
 to the top (if there's room on the top of the heart).
@@ -25,3 +25,6 @@ So your job is simple. Change `useEffect` to `useLayoutEffect` and that should
 fix things.
 
 📜 Parts of this exercise was lifted from [the React docs](https://react.dev/reference/react/useLayoutEffect#measuring-layout-before-the-browser-repaints-the-screen)
+
+📜 Learn more about the difference between `useEffect` and `useLayoutEffect` in
+[useEffect vs useLayoutEffect](https://kentcdodds.com/blog/useeffect-vs-uselayouteffect).

exercises/07.imperative-handle/01.problem.ref/README.mdx

@@ -1,11 +1,12 @@
 # useImperativeHandle
 
-👨‍💼 We've got a new thing for you to work on. Kellie 🧝‍♂️ put together a
-`Scrollable` component which is a wrapper around a `div` that has a way to
-scroll to the top and bottom of the content. We want to be able to add buttons
-to the `App` that will allow users to scroll to the top and bottom of the
-content when clicked.
+👨‍💼 We've got a new thing for you to work on.
 
-So we need you to `useImperativeHandle` to expose a `scrollToTop` and
+🧝‍♂️ I've put together a `Scrollable` component which is a wrapper around a `div`
+that has a way to scroll to the top and bottom of the content. We want to be
+able to add buttons to the `App` that will allow users to scroll to the top and
+bottom of the content when clicked.
+
+👨‍💼 So we need you to `useImperativeHandle` to expose a `scrollToTop` and
 `scrollToBottom` method from the `Scrollable` component. These methods are
 already implemented, you just need to expose them.

exercises/08.focus/README.mdx

@@ -10,13 +10,12 @@ update. For example:
 
 ```tsx
 function MyComponent() {
-	const inputRef = useRef<HTMLInputElement>(null)
 	const [show, setShow] = useState(false)
 
 	return (
 		<div>
 			<button onClick={() => setShow(true)}>Show</button>
-			{show && <input ref={inputRef} />}
+			{show ? <input /> : null}
 		</div>
 	)
 }
@@ -49,7 +48,7 @@ function MyComponent() {
 			>
 				Show
 			</button>
-			{show && <input ref={inputRef} />}
+			{show ? <input ref={inputRef} /> : null}
 		</div>
 	)
 }
@@ -80,7 +79,7 @@ function MyComponent() {
 			>
 				Show
 			</button>
-			{show && <input ref={inputRef} />}
+			{show ? <input ref={inputRef} /> : null}
 		</div>
 	)
 }
@@ -93,4 +92,4 @@ to focus it on the line following the `flushSync` call.
 In general you want to avoid this de-optimization, but in some cases (like focus
 management), it's the perfect solution.
 
-Learn more in [the `flushSync` docs](https://react.dev/reference/react-dom/flushSync).
+Learn more in [📜 the `flushSync` docs](https://react.dev/reference/react-dom/flushSync).

exercises/09.sync-external/03.problem.ssr/README.mdx

@@ -3,10 +3,10 @@
 👨‍💼 We don't currently do any server rendering, but in the future we may want to
 and this requires some special handling with `useSyncExternalStore`.
 
-🧝‍♂️ I've simulated a server rendering environment by adding some code to the
-bottom of our file. First, we render the `<App />` to a string, then we set that
-to the `innerHTML` of our `rootEl`. Then we call `hydrateRoot` to rehydrate our
-application.
+🧝‍♂️ <PrevDiffLink>I've simulated a server rendering environment</PrevDiffLink> by
+adding some code to the bottom of our file. First, we render the `<App />` to a
+string, then we set that to the `innerHTML` of our `rootEl`. Then we call
+`hydrateRoot` to rehydrate our application.
 
 👨‍💼 This is a bit of a hack, but it's a good way to simulate server rendering
 and ensure that our application works in a server rendering situation.