There's a way to update your React state more efficiently using the <code>prevState</code> with a callback in <code>setState</code> function.
<pre><code class="lang-javascript">const [name, setName] = useState('');
const [address, setAddress] = useState('');
const [phone, setPhone] = useState('');

// we have to update them separately in handlers
const handleNameChange = (arg) =&gt; setName(arg);
const handleAddressChange = (arg) =&gt; setAddress(arg);
const handlePhoneChange = (arg) =&gt; setPhone(arg);
</code></pre>
In the above case, if we have more fields that means the handlers will grow in a repetitive way. To solve this problem, I have a clever way to nest them in an object and make use of <code>prevState</code> in <code>setState</code>
<pre><code class="lang-javascript">const [formData, setFormData] = useState({});

const handler = (formProps) =&gt; (newValue)
 =&gt; setFormData(prevState =&gt; (
 {...prevState, [formProps]: newValue}
 ));
</code></pre>

There's a way to update your React state more efficiently using the `prevState` with a callback in `setState` function.

```javascript
const [name, setName] = useState('');
const [address, setAddress] = useState('');
const [phone, setPhone] = useState('');

// we have to update them separately in handlers
const handleNameChange = (arg) => setName(arg);
const handleAddressChange = (arg) => setAddress(arg);
const handlePhoneChange = (arg) => setPhone(arg);
```

In the above case, if we have more fields that means the handlers will grow in a repetitive way. To solve this problem, I have a clever way to nest them in an object and make use of `prevState` in `setState`

```javascript
const [formData, setFormData] = useState({});

const handler = (formProps) => (newValue)
    => setFormData(prevState => (
        {...prevState, [formProps]: newValue}
    ));
```

`useState` and `prevState`