Primitives

👨‍💼 I would love to have the performance improvement without all the complexity of the custom comparator function.

The default comparator function is a simple === comparison. So if we changed the props a bit, we could take advantage of this.

Remember our Avatar example before?

const Avatar = memo(
	function Avatar({ user }: { user: User }) {
		return <img src={user.avatarUrl} alt={user.name} />
	},
	(prevProps, nextProps) => {
		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
	},
)

We could change the props for this component to be primitives instead of objects.

const Avatar = memo(function Avatar({
	avatarUrl,
	name,
}: {
	avatarUrl: string
	name: string
}) {
	return <img src={avatarUrl} alt={name} />
})

And now we can use the default comparator function without specifying our own because a simple check with === will be enough.

Let's do this for our ListItem.

And make sure to check the before/after of your work!

🚨 There is no change in how many times the ListItem renders with this change so the tests will be passing from the start. But you'll want to make sure the tests continue to pass when you're finished.

06. Optimize Rendering/03. Primitives (💪 problem)

Primitives