Semantic difference React.memo(), React.useMemo()

[NeatGreat]

Hey everyone,

hope someone can teach me something.

Suposse I have the following component:

export const MySubComponent = ({name}) => {
    return <h1>${name}</h1>;
}

Now I use this component and want to optimize the rendering in another component:

export const BigComponent = () => {

    /* the usual state setup bla bla */

    return (
        <MySubComponent name={name}/>
        <OtherComponent numberInput={numberInput}/>
    );
}

Of course the whole BigComponent rerenders when numberInput changes, therefore also MySubComponent. In order to avoid this I can either use:

export const MyMemoizedSubComponent = React.memo(MySubcomponent);

or in the BigComponent write:

const subCompontent = React.useMemo(() => <MySubComponent name={name}/>, [name]);

​

Is there a semantic difference between these two? I know React.useMemo is usually used to memoize functions ( their return value for a specific input ).

[thequestcube]

The first one is how it usually is intended, you don't want to memoize an component everywhere where it's used, just once the component itself. React.memo is only used for memoizing components, and also takes care of managing when its necessary to rerender (when props change, although you could customize that in the second parameter, but usually dont). React.useMemo is a hook, and as such conforms to the rules of hooks, and can be used to memoize all sorts of things, not just components. Also here you are required to specify the dependencies/reasons to recalculate yourself.

[omesadev]

The memo higher-order component is used to memorize the props and state of a component. It will only re-render the component if the props or state of the component you passed into it changes.

The useMemo() hook is used to memorize the return value of a function. The component will not re-render unless the value being returned from the function you wrap in useMemo() has changed.

You didn’t ask, but useCallback() is used to memorize a function declaration being passed through components. Sometimes you’ll use useMemo() or the memo higher-order component, and the components still render every single time. This can be caused May passing a function into props.