Time limit to consider as computationally expensive for using useMemo/useCallback

Question

According to dozens of articles, including React docs , using useCallback and useMemo hooks helps prevent unnecessary re-renders.

On the other hand, these performance-optimizing hooks are not free and come at a cost. And their benefit might not always offset that cost. So that

MOST OF THE TIME YOU SHOULD NOT BOTHER OPTIMIZING UNNECESSARY RERENDERS

said Kent C. Dodds .

So there should be a tool to measure whether a function/variable is costy to compute and that cannot be relative (eg putting console.time() and console.timeEnd() before and after).

Is there a number as time that beyond is considered computationally heavy for most of our product users?

Answer 1

Is there a number as time that beyond is considered computationally heavy for most of our product users

As far as I know- there is no standard definition. In most circumstances, its not required (even for calculations that seem complex - computers are crazy fast).

As a general rule of thumb, if you see/notice delays in dom changes - then is the time to start looking for performance bottlenecks

Answer 2

There is the option to put console logs during development and check to see how many times you see that output in the browser inspector.

useMemo seems to always not do what it supposed to do and sometimes even seems to do more calculations vs using a useCallback.

There aren't any official documents from react website that show solid examples of how to correctly use useMemo. It's usually the usual pseudo code such as

function (props) {
 const a = useMemo(() => {
 
 //some expensive calculation
 return b;
}, [props]);