memo vs. useMemo

I’m a little confused about the relationship between memo() (the core API function) and useMemo() (the hook).

Specifically, can memo() be implemented in terms of useMemo() ?

I tried this but it doesn’t work, it just keeps re-rendering:

const my_memo = Component => props => {
  return React.useMemo(() => <Component {...props} />, [props]);
}

[gaearon]

I tried this but it doesn’t work, it just keeps re-rendering:

props itself is a new object on every render. memo() does shallow comparison by default. You can think of memo() as a useMemo() with a list of all your props like [props.foo, props.bar, props.foobar] except you don’t need to type them all manually. It’s a shortcut for the most common case.

Can someone please clarify what sort of bugs and how to avoid them? Thanks!

This is about shouldComponentUpdate but the issue is similar: https://github.com/reactjs/reactjs.org/issues/1149. Basically — if your component breaks without memo then you’re not using it correctly. It only serves as perf optimization.

[gaearon]

Yeah — the problem with that is it’ll break if order or key changes or if you add or remove keys.