More often than not, we want to update a part of an object (state) without updating the whole object.

For example, in the following object (fruit), we may want to increase its weight of it without changing the title and the color:

  const fruit{
    title: 'Apple',
    color: 'Red',
    weight: 200,
  }
Code language: CSS (css)

React allows us to have partial object updates without having to reassign the whole object. Let’s have a look at how we can do that:

import { useState } from 'react';

const PartialObjectUpdate = () => {
  const [fruit, setFruit] = useState({
    title: 'Apple',
    color: 'Red',
    weight: 200,
  });

  const displayMango = () => {
    setFruit({ title: 'Mango', color: 'Yellow', weight: 300 });
  };

  const increaseWeight = () => {
    setFruit({ ...fruit, weight: 500 });
  };

  return (
    <>
      <h3>Name: {fruit.title}</h3>
      <h3>Color: {fruit.color}</h3>
      <h4>Weight: {fruit.weight}</h4>
      <button onClick={displayMango}>
        Set mango
      </button>
      <button onClick={increaseWeight}>
        Increase weight
      </button>
    </>
  );
};

export default PartialObjectUpdate;
Code language: JavaScript (javascript)

In the above code, we have a component named PartialObjectUpdate. We have a state named fruit with initial values on line 4.

In the function displayMango, we change the complete value of the state fruit and replace it with that of Mango.

In the function increaseWeight however, we maintain the actual object value and only update the weight of the fruit.

We can check how both functions work by clicking on the Set mango and Increase weight buttons defined on lines 24 and 27 respectively.

Let’s have a better understanding with the following example:

  const [fruit, setFruit] = useState({
    title: 'Apple',
    color: 'Red',
    weight: 200,
  });

  const increaseWeight1 = () => {
    setFruit({ ...fruit, weight: 500 });
  };

  const increaseWeight2 = () => {
    setFruit({ title: 'Apple', color: 'Red', weight: 500 });
  };
Code language: JavaScript (javascript)

Both the functions increaseWeight1 and increaseWeight2,  update the weight property of the fruit state to 500, but they differ in the way they update the entire fruit object:

increaseWeight1 uses JavaScript’s spread operator to create a new object that copies all the properties of the previous fruit state object, except for the weight property (which is updated to 500).

This means that any other properties of the fruit object that were previously set will remain the same during this update.

increaseWeight2 creates a new object with the title and color properties hardcoded to their original values and the weight property set to 500. This means that any changes made to other properties of the fruit object will be discarded and reset to their original values. That is, it is also updating the weight property but along with the other properties.

Therefore, if we want to update only a specific property of the state while keeping other properties intact, we use something like the increaseWeight1 function. If we want to change all the properties of the state to some other values while updating a specific property, we use increaseWeight2.