improve things

exercises/06.rerenders/02.problem.comparator/README.mdx

@@ -18,9 +18,11 @@ const Avatar = memo(
 		return <img src={user.avatarUrl} alt={user.name} />
 	},
 	(prevProps, nextProps) => {
-		const avatarChanged = prevProps.user.avatarUrl !== nextProps.user.avatarUrl
-		const nameChanged = prevProps.user.name !== nextProps.user.name
-		return avatarChanged || nameChanged
+		const avatarUnchanged =
+			prevProps.user.avatarUrl === nextProps.user.avatarUrl
+		const nameUnchanged = prevProps.user.name === nextProps.user.name
+		// return true if we don't want to re-render
+		return avatarUnchanged || nameUnchanged
 	},
 )
 ```

exercises/06.rerenders/02.problem.comparator/src/app.tsx

@@ -111,7 +111,7 @@ const ListItem = memo(
 		)
 	},
 	// 🐨 add a custom comparator function here make sure to handle the following cases:
-	// 1. if the index or item change
+	// 1. if the props "index", "city", or "getItemProps" change
 	// 2. if the item's "selected" state has changed
 	// 3. if the item's "highlighted" state has changed
 )

exercises/06.rerenders/02.solution.comparator/src/app.tsx

@@ -118,6 +118,7 @@ const ListItem = memo(
 		return (
 			prevProps.index === nextProps.index &&
 			prevProps.city === nextProps.city &&
+			prevProps.getItemProps === nextProps.getItemProps &&
 			prevIsSelected === nextIsSelected &&
 			prevIsHighlighted === nextIsHighlighted
 		)

exercises/06.rerenders/03.problem.primitives/README.mdx

@@ -14,9 +14,11 @@ const Avatar = memo(
 		return <img src={user.avatarUrl} alt={user.name} />
 	},
 	(prevProps, nextProps) => {
-		const avatarChanged = prevProps.user.avatarUrl !== nextProps.user.avatarUrl
-		const nameChanged = prevProps.user.name !== nextProps.user.name
-		return avatarChanged || nameChanged
+		const avatarUnchanged =
+			prevProps.user.avatarUrl === nextProps.user.avatarUrl
+		const nameUnchanged = prevProps.user.name === nextProps.user.name
+		// return true if we don't want to re-render
+		return avatarUnchanged || nameUnchanged
 	},
 )
 ```

exercises/06.rerenders/README.mdx

@@ -2,11 +2,7 @@
 
 Here's the lifecycle of a React app:
 
-```
-→  render → reconciliation → commit
-         ↖                   ↙
-              state change
-```
+![→ render → reconciliation → commit → state change → rerender](/img/react-render-cycle.png)
 
 Let's define a few terms: