How to Memoize with React.useMemo() ?

React provides a powerful tool for optimizing performance, the useMemo() hook. In this article, we'll delve into how useMemo() works, its benefits, and practical examples of how to manipulate it effectively in your React applications.

Understanding useMemo() Hook in React:

The useMemo()hook is used to memoize the result of a function computation, ensuring that the computation is only re-executed when its dependencies change. This can significantly improve performance by preventing unnecessary recalculations, particularly in scenarios where expensive computations are involved.

Benefits of useMemo() Hook in React:

• Performance Optimization: By memoizing expensive function results, useMemo() reduces unnecessary re-renders and computations, thereby improving overall application performance.
• Preventing Unnecessary Work: useMemo() ensures that expensive computations are only performed when necessary, optimizing the utilization of resources and reducing unnecessary work.
• Enhanced Responsiveness: With useMemo(), React components can respond more quickly to user interactions and data changes, resulting in a smoother user experience.

Example of memoizing with useMemo Hook in React

Example 1: Optimizing Complex Calculations:

• Let's suppose you have a user interface where you enter a number, and it gets doubled and displayed. Plus, the background color changes with a theme switch.
• Now, if doubling the number takes a hefty 2 seconds, each time you tweak the input, there's a frustrating 2-second lag due to the slow calculation.
• But here's the kicker: even changing the theme, which has nothing to do with the number, triggers another 2-second delay because it causes a rerender.
  

Output:

This problem can be fixed using useMemo() function which will alow us to Memoize the doubling function. This means it only recalculates when you change the input, skipping unnecessary delays from unrelated changes like theme shifts.

Output:

Example 2: Optimize Complex Calculations within Render Props or Higher-order Components using useMemo():

• Let's accomplish the same task using Higher order functions (HOF). In this approach, we're using withMemoizedCalculation, which uses currying.
• We first call complexResult, then pass its result to ComponentUsingMemoizedCalculation. However, since complexResult takes a long time to compute, it affects the theme state, as shown in the output below.

Output:

Now, let's resolve this by employing useMemo(). We'll memoize the complexResult function based on the state of the props' value, ensuring it doesn't impact the theme state.

Output:

Example 3: Optimize Complex Calculations within Custom Hooks using useMemo(): Let's accomplish the same task using Custom Hooks:

Here, we're utilizing a straightforward custom hook called useExpensiveCalculations. This hook computes a result that takes a considerable amount of time, ultimately impacting the theme state.

Output:

Now similarly we will use useMemo() to optimize the hook on re-renders.

Output:

Conclusion:

useMemo() is a powerful tool for optimizing performance in React applications by memoizing expensive function results. By leveraging useMemo(), you can prevent unnecessary re-renders and computations, resulting in a smoother and more responsive user experience. Whether you're computing Fibonacci numbers, filtering lists, or performing other computationally intensive tasks, useMemo() can be a valuable ally in your quest for performance optimization in React.