useMemo is to memoize a calculation result between a function's calls and between renders

useCallback is to memoize a callback itself (referential equality) between renders

useCallback and useMemo -

  both for optimization in react.

useCallback - caches a callback (function) to keep its previous reference.

            - referential equality between renders

            - if function is passed as props, will not re-render the component if wrapped with react.memo

            - since function reference did not change

​

​

useMemo     - similar to useCallback but this hook caches a value or result

            - does no recompute if dependency array did not change resulting to optimized performance

---- useMemo vs useCallback -----------------------------------------

​

useMemo: memoize A CALCULATION RESULT between a function's calls

and between renders.

​

useCallback: memoize A CALLBACK ITSELF (referential equality) 

between renders.

​

---------------------------------------------------------------------

  both for optimization in react.

useCallback - It caches the provided function instance 0.

             - when need to cache a function useCallback

useMemo -It invokes provided function and caches it's result.

        - wen you need to cache the result of an invoked function useMemo

useCallback and useMemo -

  both for optimization in react.

useCallback - caches a callback (function) to keep its previous reference.

            - referential equality between renders

            - if function is passed as props, will not re-render the component if wrapped with react.memo

            - since function reference did not change

​

​

useMemo     - similar to useCallback but this hook caches a value or result

            - does no recompute if dependency array did not change resulting to optimized performance