I have been learning about wrapping initial state values in callback to implement Lazy Initialization of useState hooks in React. It is a cool trick, but every resource or tutorial is a bit vague or opaque in regards to how to determine something is computationally expensive.
I know that I shouldn't wrap a primitive in a callback e.g. () => 0 or () => '' as this would actually be worse as the cost to create this callback outweighs just using the primitive every time. But it is unclear at what thresh hold do I need to cross before the expression becomes expensive. Is someArray[someIndex] expensive? is 'foo' + 'bar' or 1 * 1 expensive? I know window.localStorage.getItem('fizz') and Math.random() are expensive, but only because these were used as examples in addition to the useless expensiveComputation().
If there is no clear "hard line" to cross that can be used as a rule to answer this question, are there any tools or debugging techniques that can be used to decide?