[React] Use updater function for key-value data setter in useForm hook

[rrmesquita]

This is a proposal for changing the ergonomics of the key-value variant for the setData hook in React.

Current behaviour

Using this simple form as an example:

const form = useForm({
    name: 'Alice',
    lastname: 'Doe',
})

It is expected that sequential calls to setData will update the form data accordingly. However, subsequent calls overwrite the changes made by the previous calls.

form.setData('name', 'Bob') // { name: 'Bob', lastname: 'Doe'}
form.setData('lastname', 'Smith') // { name: 'Alice', lastname: 'Smith'}

Desired behaviour

Sequential setData calls use an updater function to batch the changes from multiple calls.

form.setData('name', 'Bob') // { name: 'Bob', lastname: 'Doe'}
form.setData('lastname', 'Smith') // { name: 'Bob', lastname: 'Smith'}

---

This can be achieved using updater functions for the set functions in React. From React documentation:

Is using an updater always preferred?

In most cases, there is no difference between these two approaches.

However, if you do multiple updates within the same event, updaters can be helpful.

If you prefer consistency over slightly more verbose syntax, it’s reasonable to always write an updater if the state you’re setting is calculated from the previous state.

It is worth noting that this only affects the key-value variant of the setData function, and if anyone is impacted by this change, they can switch to the object variant of the setData function.

[rrmesquita]

Update: I just noticed that the current behaviour is very unexpected because it overrides previous changes not only from key-value calls but all setData calls. Personally, I consider this a bug.