# React Performance: useState Lazy Initialization

Whenever you need to set the initial value of the state from a function that returns a value (see below), the function will get called at every re-render even though we only need it during the initial render.

```javascript
const initialState = caluclateValue(props);
```

```javascript
const [someStateVal, setSomeStateValue] = React.useState(initialState);
```

We can lazy initialize useState with a function like this:

```javascript
const getInitialState = (props) => caluclateValue(props);
```

```javascript
const [someStateVal, setSomeStateValue] = React.useState(initialState);
```

In this case, React will only call the function when it needs the initial value. that is once at the time of the first render. This is called “lazy initialization.”

Play with it or test it out [here](https://jsfiddle.net/shauryakalia/5anpb4Ld/42/)!

*Originally published at* [*https://www.shauryakalia.com*](https://www.shauryakalia.com/blogs/react-js-performance-use-state-lazy-initialization)*.*