I read about lazy init lately when enrolled in FrontendMaster course from Brian Holt. It is said that lazy init is used when you want to perform some heavy calculation actions rather than primitive values in the <code>useState</code> hook. For example calculating some complex formula, creating some DOM elements,...
<pre><code class="lang-javascript">const [currentDOM, setCurrentDOM] 
 = useState(React.createElement('div'))
</code></pre>
Keep in mind that <code>useState</code>'s value is init-ed only once when the component is loaded up, after that it will behave naturally with its inner state. So, with the heavy actions or results of complex calculation, we would like to calculate - or init them once until further next changes to save some performance by not re-calculating these costly actions. This can be improve by using Lazy Initialization: passing the return value in a callback function
<pre><code class="lang-javascript">const [currentDOM, setCurrentDOM] 
 = useState(() =&gt; React.createElement('div'))
</code></pre>

I read about lazy init lately when enrolled in FrontendMaster course from Brian Holt. It is said that lazy init is used when you want to perform some **heavy calculation actions rather than primitive values** in the `useState` hook. For example calculating some complex formula, creating some DOM elements,...
```javascript
const [currentDOM, setCurrentDOM] 
  = useState(React.createElement('div'))
```

Keep in mind that `useState`'s value is init-ed only once when the component is loaded up, after that it will behave naturally with its inner state. So, with the heavy actions or results of complex calculation, we would like to calculate - or init them once until further next changes to save some performance by not re-calculating these costly actions. This can be improve by using **Lazy Initialization**: passing the return value in a callback function
```javascript
const [currentDOM, setCurrentDOM] 
  = useState(() => React.createElement('div'))
```



Lazy Initialization in React