A simple explanation of React's useMemo: A mechanism that simply remembers the results

#beginners #programming #webdev

Introduction

When React executes operations like filter() and map() every time,
it can slow down your app with each re-render.
useMemo prevents these unnecessary recalculations.

useMemo Basics

const value = useMemo(() => {
return heavyCalculation();
}, [dependency]);

What the above code means

"Recalculate only when dependencies change,
use the previous results otherwise."

Example: Optimizing filter processing

const filteredSpots = useMemo(() => {
return spots.filter((spot) => {
if (filters.wifi && !spot.wifi) return false;
if (filters.power && !spot.power) return false;
return true;
});
}, [spots, filters]);