Home Page Blog An In-Depth Look at the Difference Between useMemo and useCallback By Eugene Mikhushkin An In-Depth Look at the Difference Between useMemo and useCallback ComparisonFrontendJavaScriptReact.jsweb development Last Updated: 16/08/2022 1,438 3 min. UseCallback is used to optimize the rendering behavior of your React function components, while useMemo is used to memoize expensive functions to avoid having to call them on every render. As a standard construction of hooks, those two solutions are not so different. Like with useEffect, a hook that manages the side-effects in functional components, argument callback comes first and then an array of dependencies. Here are a few important questions: If the purpose of useEffect is to update the component, why not use this hook to facilitate data storage and not only for memoization?Why use two methods for one purpose?What not return data or JSX from useCallback and then use it?What is the difference between these methods? An In-Depth Example A useMemo is called using React source code, while a useCallback is called by the user. Here is an in-depth example: function memoUsed() { const _ = useMemo(() => { return ‘insert JSX here’ }) return _ } function callbackUsed() { const _ = useCallback(() => { return ‘insert JSX here’ }) return _() } As you can see, useMemo is easily imitated using a string returned in two slightly different ways. A variable of useMemo contains only the result of the return, which means everything in the body of the argument function is ignored. A variable of useCallback contains a function without execution. It simply uses a straight string, also known by the user as a return statement. This means that these two approaches actually have the same re-render count and deliver the same results. useMemo is Not Recommended to Call Other Hooks Calling side hooks in useMemo can cause state changes and force component updates. In comparison, React is already updating. In addition, React spots changes and runs updates immediately. It’s also important to note that useCallback is similar to React. Here is another in-depth example: function memoUsed() { const [state, setState] = useState(null) const _ = useMemo(() => { // cause infinite re-render setState(‘value’) return ‘insert JSX here’ }) return _ } function callbackUsed() { const [state, setState] = useState(null) const _ = useCallback(() => { // regular thing setState(‘value’) return ‘insert JSX here’ }) return _() } Check React.js developers availability Check availability Check React.js developers availability experience Please choose the experience level:* Intermediate Senior duration Please choose the duration:* 3-6 months 6+ months Details When to start:* in a week in 2-3 weeks in a month Finish Enter your e-mail and we will be in touch shortly.* I'm just checking the prices/options and don't have a need right now. Please don't try to reach out. I have read and agree to the Website Terms of Use and Privacy Policy. Prev Next The Function Takes No Parameters in useMemo useMemo is a straightforward React hook. In comparison, useCallback needs to process event data or custom arguments indicated by the user. Here is another in-depth example: function memoUsed() { const _ = useMemo((arg1) => { // React ignores arguments return ‘insert JSX here’ }, []) return _ } function callbackUsed() { const _ = useCallback((what, where) => { // can be used inside functions return ‘insert ${what} ${where}’ }) return _(‘JSX’, ‘here’) } Dependency Arrays With useMemo With useMemo, dependency arrays can be undefined, but doing so is a gamble. Without defined dependency arrays in both hooks, there is no memoization and a re-render will be required. In TypeScript definitions, you can use the line below for useMemo. However, it does have some bugs so don’t make it optional since that will likely lead to mistakes: // allow undefined The Big Picture In most instances, useMemo can be replaced by useCallback, especially for data and methods memorization. Maybe the next version of React will eliminate the need for three separate hooks (yep, useDispatch can also store more complex state objects). We’ll have to wait and see. ComparisonFrontendJavaScriptReact.jsweb development By Eugene Mikhushkin 1,438 Posted: 21/09/2021 Last Updated: 16/08/2022 Previous postImplementing Supply Chain Management System: Rolling Out Guide Next postERP and Supply Chain Management System: Improve Efficiency of Your Business Write a Reply or Comment Cancel replyYour email address will not be published. Required fields are marked * This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.Post