Understanding the Differences Between useCallback and useMemo

React has revolutionized the way we build interfaces with its innovative and dynamic approach.

Ever since version 16.8 rolled out, Hooks have become a game-changer, enabling developers to work with state and other React features without the need for classes.

Among these Hooks, two stand out for their significance: useCallbackand useMemo.

In this article, we’ll take a deep dive into these hooks, understand their differences, and learn when, why, and how they should (or should not) be used.

A Brief Introduction to useCallback and useMemo

The useCallback hook returns a memoized version of the callback function that only changes if one of the dependencies has changed.
It’s useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders.

The useMemo hook returns a memoized value.

Like useCallback, it only re-calculates the memoized value when one of the dependencies has changed. It’s great for expensive calculations.

When and How to Use useCallback and useMemo

Now that we have a brief understanding, let’s jump into some practical examples.

An Intricate Game Scenario — Using useCallback

Imagine we’re creating an intricate game application where a player can increase their level by collecting gems. Every time they level up, they get a celebratory message.

Here’s a simplified version of that.

Now, the issue here is that the levelUp function is created each time Game renders.

Thus, Boardre-renders every time, even when there are no level changes. This might slow down our app, especially with complex board rendering. Here’s where useCallback shines:

With this change, a memoized levelUpfunction is passed to Board unless the level changes.

The expensive board rendering process only happens when necessary, improving performance.

An E-Commerce Filter — Using useMemo

Suppose you’re building an e-commerce app with a product listing page.

There’s a filter feature that allows users to search for products by their names.

Here’s a basic setup:

The issue is, the filter function runs each time ProductList renders.

If you have thousands of products, this could slow down your app significantly. The useMemohook can solve this problem:

Now, the expensive filter function only runs when products or filter changes, leading to much better performance for your product list.

When Not to Use useCallback and useMemo

While useCallback and useMemo can provide performance boosts in specific scenarios, they should not be used everywhere. Here’s why.

Overuse of useCallback

Using useCallback unnecessarily can lead to more harm than good.

It creates an overhead of maintaining the memoized version of the function, which can be more expensive than the function invocation itself.

Let’s consider an example:

In this example, useCallbackis not needed, because the updateName function is not computationally expensive or passed as a prop causing unnecessary re-renders.

Removing useCallbackfrom this code simplifies it without any performance downside.

Misuse of useMemo

useMemo can also be overused or misused. If the calculation isn’t computationally expensive, then useMemomight bring more overhead than benefits.

For example:

In this case, useMemois unnecessary since the multiplication operation isn’t expensive.

It would be better to simply calculate totalPricewithout memoization:

Conclusion

useCallback and useMemoare powerful tools in the React developer’s toolkit. They are designed to help optimize React apps by preventing unnecessary renders and computations.

However, like many powerful tools, they can lead to issues when used inappropriately or excessively.

By understanding the use cases for these hooks and using them judiciously, we can create more performant and maintainable React applications.