'useMemo' Hook in React

When building React applications, components can re-render many times. During re-rendering, some calculations may run again even when the data has not changed. To avoid unnecessary calculations, React provides a Hook called useMemo.

What is useMemo?

useMemo is a React Hook that remembers, or caches, the result of a calculation. React can reuse the previous result when its dependencies have not changed.

For example:

import { useMemo } from "react";

const result = useMemo(() => {
  return number * number;
}, [number]);

Here, number is the dependency. If its value stays the same, React can reuse the cached result instead of recalculating it.

Why Do We Need useMemo?

Imagine a college application that displays student results. The application filters thousands of student records to find students who scored above 80 marks.

const topStudents = useMemo(() => {
  return students.filter(
    student => student.marks >= 80
  );
}, [students]);

Here, React can reuse the filtered student list when the students dependency remains unchanged. If the student data changes, React recalculates the list.

Understanding the Dependency Array

The dependency array tells React which values the calculation depends on.

const total = useMemo(
  () => price * quantity,
  [price, quantity]
);

If either price or quantity changes, React recalculates the total. If neither changes, React can reuse the previous result.

When Should We Use useMemo?

We can use useMemo when performing expensive calculations, filtering large datasets, sorting records, or processing complex data.

However, we should not use it for every small calculation. For simple operations, using useMemo may add unnecessary complexity without providing much benefit.

It is also important to understand that useMemo does not prevent a component from re-rendering. It only helps avoid unnecessary recalculations.

Conclusion

useMemo is a useful React Hook for improving performance when calculations are expensive. It caches a calculation result between renders and recalculates it when its dependencies change.