What is useMemo?

useMemo caches computed values and only recalculates them when dependencies change. It's like having a smart calculator that remembers answers until the input numbers change.

What is memoisation?

Memoisation stores expensive calculation results. Instead of redoing the same maths every time, React remembers the answer and reuses it until something important changes.

Think of it as a well-organised ledger - useMemo acts like a meticulous accountant who only recalculates when the numbers actually change.

How useMemo works

• Function - Give it a function that computes a value
• Dependency array - List what variables it should watch
• Smart caching - Only runs the function when dependencies change

When to use useMemo

• Expensive calculations - Heavy filtering, sorting, or mathematical operations
• Referential equality - Keeping object/array references stable for child components
• Proven performance issues - Only when you've identified actual bottlenecks

Basic example

You have 1000 items to filter and sort based on user input. Without useMemo, this happens on every render. With useMemo, it only happens when the items or filter criteria change.

Best practices

• Don't overuse - Only optimise when there's a clear performance benefit
• Include all dependencies - List every variable your calculation uses
• Measure first - Profile before optimising

Remember

Memoisation has overhead. Make sure the computation cost justifies the caching cost. When in doubt, measure performance before and after.