What is the concept of Memoization in React JS?

In React JS, performance optimization plays an important role in ensuring the smooth and efficient rendering of components. One powerful technique for optimizing performance is Memoization.

What is Memoization?

Memoization is a technique that involves storing the result of a function call based on its input parameters so that if the same inputs are provided again, the cached result can be returned instead of recomputing the function. In React JS, Memoization is commonly used in functional components to optimize rendering and prevent unnecessary re-renders.

The React.memo() function

React provides a built-in higher-order component (HOC) called React.memo() that enables memoization for functional components. The React.memo() function wraps a component and checks for prop changes before re-rendering it. If the props have not changed since the last render, React.memo() skips the re-rendering process and returns the previously rendered result, which is stored in the cache.

Example

Explanation

In the example above, React.memo() wraps the functional component MyComponent, ensuring that it only re-renders when the props change.

Run the example above and click on the Increase Age button, which will increase the age by 1, age is changing so it will render the component. However, when you click on Change to Same Age button, it sets the age equal to the previous age, so the age is not changing. That's why it will not render the component.

Custom Memoization with useMemo()

In addition to React.memo(), React provides another hook called useMemo(). useMemo() allows you to memoize the result of an expensive computation and reuse it across multiple renders, preventing unnecessary recalculations.

Example

Explanation

In the above, the result of the expensive computation is memoized using the useMemo() hook. The computation is only performed when the value prop (age) changes.

• Lines 7–9: The useMemo hook is used to calculate the square of the count value. It takes a function as its first argument, which calculates the square by multiplying count with itself. The second argument to useMemo is an array of dependencies, in this case, [count]. This means the memoized function will be recalculated only when the value of count changes.

• Line 17: When you click the "Increment" button, the setCount function is called with the new value of count (current count + 1), which triggers a re-render of the component and updates the displayed count value. The square is also recalculated because count has changed.

• Line 18: When you click the "Same" button, the setCount function is called with the same value of count, effectively causing a re-render of the component but without changing the count value. In this case, the square is not recalculated because the count value hasn't changed.

Advantages of Memoization

Here are a few advantages of memoization:

• Improved performance: Memoization helps optimize rendering by preventing unnecessary re-renders of components. It reduces computational overhead and improves the overall performance of React applications.

• Avoiding unnecessary calculations: By caching the results of expensive computations, memoization ensures that the same computation is not repeated multiple times for the same input values, saving valuable CPU cycles.

• Granular control: Memoization can be applied selectively to specific components or computations that are known to be expensive, providing granular control over performance optimizations.

Conclusion

Memoization is a powerful technique for optimizing performance in React JS applications. By caching the results of expensive function calls, React.memo() and useMemo() enable efficient rendering and prevent unnecessary recalculations. Implementing memoization correctly can lead to significant performance improvements, resulting in smoother user experiences.