06 done

exercises/05.portals/01.problem.create/tooltip.tsx

@@ -22,7 +22,6 @@ export default function Tooltip({
 		if (!rect) return
 		const { height } = rect
 		setTooltipHeight(height)
-		console.log('Measured tooltip height: ' + height)
 	}, [])
 
 	let tooltipX = 0

exercises/05.portals/01.solution.create/tooltip.tsx

@@ -23,7 +23,6 @@ export default function Tooltip({
 		if (!rect) return
 		const { height } = rect
 		setTooltipHeight(height)
-		console.log('Measured tooltip height: ' + height)
 	}, [])
 
 	let tooltipX = 0

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

@@ -0,0 +1,27 @@
+# useLayoutEffect
+
+👨‍💼 Our tooltip is great, but we do need to make measurements when we display it.
+We do this in a `useEffect` hook now with code like this:
+
+```tsx
+useEffect(() => {
+	const rect = ref.current?.getBoundingClientRect()
+	if (!rect) return
+	const { height } = rect
+	setTooltipHeight(height)
+}, [])
+```
+
+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
+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).
+
+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)

exercises/06.layout-effect/01.problem/tooltip.tsx → exercises/06.layout-computation/01.problem.layout-effect/tooltip.tsx

@@ -18,6 +18,8 @@ export default function Tooltip({
 	const ref = useRef<HTMLDivElement | null>(null)
 	const [tooltipHeight, setTooltipHeight] = useState(0)
 
+	// 🐨 change this to useLayoutEffect to ensure it runs synchronously after the
+	// DOM has been updated so the user doesn't see the tooltip jump around.
 	useEffect(() => {
 		const rect = ref.current?.getBoundingClientRect()
 		if (!rect) return

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

@@ -0,0 +1,13 @@
+# useLayoutEffect
+
+👨‍💼 Have you ever heard of the mechanic who charged $200 when all he did was
+tighten a screw? The customer was outraged and asked for an itemized bill. The
+mechanic sent him an invoice that read:
+
+```
+Tightening a screw: $1
+Knowing which screw to tighten: $199
+```
+
+Even though this exercise was really easy, knowing when to use `useLayoutEffect`
+is the hard part. It's like knowing which screw to tighten. Good job!

exercises/06.layout-computation/FINISHED.mdx

@@ -0,0 +1,3 @@
+# Layout Computation
+
+👨‍💼 Hey... You're awesome. 😎

exercises/06.layout-computation/README.mdx

@@ -0,0 +1,26 @@
+# Layout Computation
+
+Sometimes you need to compute the layout of some UI before it is actually
+displayed. This is often necessary if the size, position, or location of your UI
+depends on the size, position, or location of the other elements on the page or
+even itself (like the contents of a tooltip).
+
+The trouble is, sometimes you don't know the size, position, or location of the
+other elements on the page until the layout has been computed. So what happens
+is you render the UI, then you make your measurements, then you re-render the UI
+with the new measurements. This is inefficient and can cause flickering.
+
+To avoid this problem in React, you can use the `useLayoutEffect` hook. This
+hook is designed with this specific use case in mind and is not a hook you'll
+find yourself needing very often.
+
+It literally has the same API as `useEffect`, but it runs synchronously after
+the DOM has been updated. You may recall from the `useEffect` exercise, the
+[React flow diagram](https://github.com/donavon/hook-flow):
+
+![React Flow diagram showing mount, update, unmount](https://github-production-user-asset-6210df.s3.amazonaws.com/1500684/295689283-b9ecdd1d-ce28-446b-84ad-6b264d4be8e4.png)
+
+The `useLayoutEffect` hook runs after the DOM has been updated but before the
+browser has had a chance to paint the screen. This means you can make your
+measurements and then render the UI with the correct measurements before the
+user sees anything.