Primitives
Loading "Primitives"
Run locally for transcripts
π¨βπΌ 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.
