top | item 38516030

(no title)

uryga | 2 years ago

> AFAIK there's no magic to React.memo. It's basically a shorthand for useMemo that takes the props as the dependency.

Pedantic note: this isn't quite true. memo() also allows a second `arePropsEqual` argument that useMemo doesn't have. Also, memo() compares individual prop values, while useMemo() can only look at the whole props object (which would be "fresh" on every render -- it's a diffferent object, even if it has the same values). So it's not like you can easily reimplement memo() via useMemo(). But of course, conceptually they are pretty close :)

discuss

order

pavlov|2 years ago

> “Also, memo() compares individual prop values, while useMemo() can only look at the whole props object”

Passing “Object.values(childProps)” as the dependency array for useMemo should do the same thing.

But yeah, there are good reasons to use React.memo for convenience with props. It’s not fundamentally different though, and you can definitely useMemo() for caching components when more convenient.

culi|2 years ago

Using `useMemo` without using `React.memo` on the child component does not prevent a rerender at all.