Using useMemo instead of React.memo syntax issue

React.memo and React.useMemo are not equivalent at all (don’t rely on naming similarity). Here’s a quote from React.memo doc:

React.memo is a higher order component.

So it’s a HOC that can optimize rendition of your component given that it renders the same output with the same properties.

React.useMemo on the other hand is more generic and returns a memoized value:

Pass a “create” function and an array of dependencies. useMemo will
only recompute the memoized value when one of the dependencies (either a or b) has
changed.

const memoizedValue = useMemo(
  () => computeExpensiveValue(a, b), 
  [a, b]
);

And while it can be hacked to be used instead of React.memo, it’s not its purpose and it will add to the confusion more than it will help. useMemo is a hook and is subject to the certain usage rules.

And there’s this warning as well:

In the future, React may choose to “forget” some previously memoized
values and recalculate them on next render, e.g. to free memory for
offscreen components. Write your code so that it still works without
useMemo — and then add it to optimize performance.

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)