Use React hooks to do delta update

When development web application, sometime, we need to update just one or two property of an entity with many fields. Actually it is so sure to not update all the fields when user just update some part of the entity.

In React, it is one-way data biding. For example, you bind the object property value to an input field. When you change the field value, it won’t change the object property value accordingly. You need to hand it by yourself.

To do that, we need to pull out the delta changes and pass that to server and handle the update specifically.

First, capture the delta changes in React

You can use React useState() hooks to initial the entity with empty object

const EntityMasterComponent = (entity) => {
    const [entity, updateEntity] = useState(entity);
    const [deltaChange, updateDeltaChange] = useState({});

    ...

    const handleChange = (fieldName, fieldValue) => {
        updateDeltaChange({
            ...deltaChange,
            [fieldName]: fieldValue
        })
    }
    ...
    return (<div><form>
        <input name="field1" value={entity.field1} onChange={event => handleChange('field1', event.currentTarget.value)} />
        <input name="field2" value={entity.field2} onChange={event => handleChange('field2', event.currentTarget.value)} />
    ...
    </form></div>)
}

From the above example, we define a deltaChange state with an empty object. Every time when some field is updated, the handleChange function is called and the field name and value is set into the deltaChange state.

When user want to save the change, you can pass the deltaChange state into the request body as below:

const doSave = () => {
    fetch("/entity/" + entity.id, {
                method: 'put',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(deltaChange)
            }).then(resp => resp.json())
                .then(resp => console.log(resp.msg))
                .catch(err => console.log(err));
}

On server side, you should be able to get the map of delta changes and process validation and update storage.