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.
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.
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.
- 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 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.
- 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