Is React moving away from React.memo in favor of useMemo?

Question

Both React.memo and the useMemo hook allow performance optimizations by reducing recalculation and rerendering. However, they work definitely in that React.memo is used to wrap a functional component and the useMemo hook can be used on almost any function, even pure calculations. More importantly, useMemo is typically called from a parent to a child component, while React.memo is typically called on the declaration of the child itself.

While both have different advantages, one advantage of React.memo is that it doesn't have to be called from each parent to child relationship. However, with the release of hooks, it seems apparent that React development wants to move towards functional components that use hooks to deal with state, side-effect events, and other effects. While I don't think that the React development team would have the courage or disregard of their user base to remove React.memo any time in the next 2 years, it makes me wonder if they want end users to stop using React.memo for stylistic reasons. Just as they have kind of passive aggressively moved away from class components in favor of functional components with hooks.

When using functional components with hooks, is the react framework moving away from React.memo? Would it be better to get used to using the hook version if one wants to keep up with React best practices in the future?

Answer 1

The short answer is no.

Both are used to optimise performance in regard to reducing unnecessary re-rendering, but React.memo and useMemo are used for two different scenarios...

React.memo is a HOOC and informs react to perform a shallow comparison of the passed in props to determine whether to re-render.

https://reactjs.org/docs/react-api.html#reactmemo

Example:

export const Component = React.memo(({name}) => `Hello ${name}`)

Here, react will to a shallow comparison, and will only re-render if name has changed.

useMemo is a hook and is used to memoize a value. React will only only re-evaluate the value if the dependencies (second arg of useMemo) change. There are usage rules with hooks that should be followed.

https://reactjs.org/docs/hooks-reference.html#usememo

Example:

export const MyComponent = ({firstName, lastName, age}) => {

    const fullName = useMemo(() => `${firstName} ${lastName}`, [firstName, lastName]);

    return <Profile fullName={fullName} />

}

You could hack useMemo to do something like React.memo, but it is not intended to be used that way.

useCallback There is also the useCallback hook that is often used with React.memo.

If your parent component passes a callback to a child that is wrapped in React.memo , it's a good idea to create the callback using useCallback otherwise the child will re-render anyway due to the callback being re-created each time the parent re-renders.

useCallback also takes a dependency array like useMemo so that it can be re-created if a dependency changes.

https://reactjs.org/docs/hooks-reference.html#usecallback

Example:

export const MyComponent = ({firstName, lastName, age}) => {

    const handleClick = useCallback((e) => {
        e.preventDefault();
        // doSomething
    }, []);

    return <Profile onClick={handleClick} />

}

const Profile = React.memo((onClick) => (
    <button onClick={onClick)>Click me!</button>
));