> 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 :)
> “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.
> You can definitely use useMemo with JSX elements to prevent child components from being re-rendered too often
Only if those child components are memoized. By default, whenever the state of a component changes, React will rerender the entire subtree. The only time it doesn't is when a child component is memoized (React.memo) AND the props haven't changed. Utilizing useMemo and useCallback is how we prevent non-primitive props from being recreated unnecessarily
React actually has a little-known "same element reference" optimization. If your component returns the exact same JSX element reference in the same spot in consecutive renders, React will bail out of rendering that subtree, regardless of whether or not the child component is wrapped in `React.memo()`. This allows the parent component to control the behavior. So yes, `useMemo` would be how you do that:
I see what you mean. I'm a little shocked the docs have an example of it being used in this way. Using `useMemo` in this way is generally considered a bad practice and a "hack". The new version of the react docs does not have an example of useMemo being (mis)-used in this way
You can definitely use useMemo with JSX elements to prevent child components from being re-rendered too often.
There's an example right in the React Hooks FAQ where it reads: "Conveniently, useMemo also lets you skip an expensive re-render of a child"
https://legacy.reactjs.org/docs/hooks-faq.html#how-to-memoiz...
AFAIK there's no magic to React.memo. It's basically a shorthand for useMemo that takes the props as the dependency.