⚛️React performance tip: If your default state is expensive, put it in a...
⚛️React performance tip: If your default state is expensive, put it in a function.
Here’s why: If the default logic is inlined, it's needlessly executed on every render.
But, if you declare the default value in a function, the function is only invoked once. 👍
And if you think about it, this makes total sense. When a React component renders, the component function is executed, including inline code in the default state arg. React can’t prevent that. It’s just how JS works.
But if it’s a function reference, it’s not invoked by the JavaScript engine. So React gets to decide when to invoke a function passed to the useState default.
React only invokes a function passed to the useState default on the first render.