Bug: setState does not rerender a functional component when an object's property is deleted

React version: 16.13.1 and 16.12.0

Steps To Reproduce

1. Create a state variable that contains an object. E.g.

const [employees, setEmployees] = useState({
    taimoor: {
      age: 21,
      occupation: "Web developer"
    },

    volod: {
      age: 22,
      occupation: "Programmer"
    },

    dawson: {
      age: 23,
      occupation: "Security analyst"
    },

    andrew: {
      age: 21,
      occupation: "HR"
    }
  });

1. Add a function that will delete a property of that object using setState(...). E.g.

function delEmployee(name) {
    setEmployees(prev => {
      delete prev[name]; // The delete keyword does not trigger a rerender
      return prev;
    });

    console.log("State was updated!", employees); // Despite the state updating just fine!
  }

1. To actually trigger the rerender that should happen, edit the state of some other variable. E.g. setTextBoxInput(...)

Link to code example: https://codesandbox.io/s/reverent-ganguly-3y19r?file=/src/App.js:471-1114

The code sample above also contains a workaround for the delete keyword not triggering a rerender, which is to use Object.assign({}, obj) and then use delete.

The current behavior

After using the delete keyword on the previous object within setState((prev) => {...}) the state is successfully updated, but a rerender does not occur. A workaround is to copy the object, then use the delete keyword.

The expected behavior

Using the delete keyword on the previous object within setState((prev) => {...}) should cause a rerender.

[vkurchatkin]

React detects state changes by comparing old state with new state. If it is the same object it infers that no render is required

[bvaughn]

This sandbox shows two problems:

1. Treat a React state object as immutable. Read from it only. Don’t write.
2. Return a new object (or value) if you want to update the component and re-render. React may choose to bail out in some cases if you return the previous state object because React does not do any deep cloning or comparison of the object. (That would expensive.)

You can clone the object and then delete the field- or just don’t clone that field in the first place, whichever is easier.