useMemo

useMemo returns a memoized value.

Think of memoization as caching a value so that it does not need to be recalculated.

useMemo only runs when one of its dependencies update.

useMemo should be used as a performance optimization, not relied on as a semantic guarantee.

It can be used to keep expensive, resource intensive functions from needlessly running.

In the future, React may choose to forget some previously memoized values and recalculate them on next render, e.g. to free memory for offscreen components.

Write your code so that it still works without useMemo — and then add it to optimize performance.

I definitely need to look more into this, I'm still not certain about syntax

Example