useMemo vs useCallback: The Big Picture and Deep-Dive

by ,

useCallBack and useMemo often get confusing, especially for people who work on React Hooks. Questions developers ask include, ‘Why do useCallback AND useMemo expect a function?

In this piece, we will consider the distinct functionality of useCallback vs useMemo, and note their differences in real-life operations.

useMemo vs useCallback: The Big Picture and Deep-Dive

Let’s Take an Abstract View

According to the React docs, The mail difference between useMemo vs useCallback is that useCallback, ‘Returns a memorized callback,’ while useMemo ‘Returns a memorized value.’

That is, when you use the useCallback, you get the referential equality between the renders for function. On the other hand, using the useMemo will produce the referential equality between renders for values. 

useCallback and useMemo when executed expect dependencies and a function; however, useCallback returns the functions if the dependencies change; and on the other hand, useMemo calls its own functions and returns the results. 

Sponsored Video

Let’s Translate What We Have

Going over the abstract description above, let’s have a look at these terms: 

useMemo and useCallback Difference: First Class Functions

It’s important to observe First class functions when establishing the difference between useMemo and useCallback.

In JavaScript, a coder can assign a specific function to a value; hence, functions are said to be first class. Also, you can store functions as variables and call them for cursive points as:

  • return values from functions,
  • arguments to other functions,
  • values in an array,
  • values to an object’s keys,
  • keys to map object,
  • High-order functions can return functions or take them as inputs. 

useCallback Vs. useMemo APIs

useCallback and useMemo APIs are similar because they both take in a function and also an array of dependencies, as represented below. The APIs of useCallback and useMemo look similar. They both take in a function and an array of dependencies.

  • useCallback (fn, deps);
  • useMemo (fn, deps);

The Difference between useCallback and useMemo

useCallback returns its function uncalled, opening a functionality where you can call it later. useMemo calls its function, and then it returns the result. 

Please note that the examples presented in the above analysis are meaningless in real-world execution and were only created to explain the API process. Wondering when to use useCallback and useMemo in the real world?

If you can pass on a function to useCallback or useMemo directly, and if you can also use that same function with empty dependencies, you should be able to define the function away from the component (and do without the useCallback or useMemo). 

useCallback will almost always take in an ‘inline callback’ An inline callback calls forth the function that uses the API dependencies. useMemo, on the other hand, takes a “create function” that calls a function and returns back its results.

Please Note: You can’t ever use useCallback to memorize values—it would never work. What this means essentially is that the useCallback(fn(), deps) doesn’t exist.

Usage Of useCallback and useMemo

In the usage, it is obvious that you need two hooks to memorize values.

Whenever you depend on the referential equality between two renders, you need to use the useCallback or the useMemo.

You can use this method for the useEfffect and react.memo and then useMemo to replace the shouldComponentUpdate from React.Purecomponent because the system checks the dependencies of the Hooks for referential qualities. 

useCallback vs useMemo Let’s have another practical example: 

If you have a component that states that a given userid displays the data of the user, let’s try to spot the mistake. 

With the eslint-plugin-react-hooks installed, what you will have is an error notification for the omission of the fetchuser from the useeffect’s dependencies; however, if you just add it without care, you may soon create an infinite loop. 

When dealing with React functions as defined in the components of functions; the function components become recreated on each and every render, because of the closureIn React functions defined in function components get re-created on every render because of the closure (In Javascript, a closure opens access to the scope of the outer function from an inner function [a function within]), resulting in ‘referential inequality.’

When the aforementioned issue happens in useMemo vs useCallback, you can move fetchuser inside the useeffect, adding the userId as a dependency. And while this solution looks seamless, you can also resolve the issue by defining the fetchuser with usecallback, forcing the function to remain as it is—this is only untrue if the userid changes.  

Summary

  • usecallback helps you to define a function with referential equality between renders. 
  • While usememo can be used to get a value with referential equality between renders. 

For useCallback vs useMemo, the return values of useCallback and useMemo will only change if their dependencies change.


Like This Post? Checkout More

Photo of author

Rahul Choudhary

A Digital Marketer by profession and a passionate traveller. Technology has been always my first interest, so I consistently look for new updates in tech to explore, and also has expertise in WordPress.