usememo usecallback code example

Example 1: react usememo vs usecallback

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

Example 2: use callback vs use memo

// They both take a function and an array of dependencies:

useCallback(() => {···}, [dependency1, dependency2]);
useMemo(() => {···}, [dependency1, dependency2]);

// So what is the difference? 

// useCallback returns its function uncalled so you can call it later
// therefore, it gives you back the function's reference

// useMemo calls its function and returns the result.
// therefore, it gives you back the function's return value