How to clear out state variables in React?

Question

Since support for replaceState is removed and setState does shallow merging, is it possible to remove all state variables and update the state by adding new variables as in the cases below without mutating(this.state) the state directly?

// let's say this.state is { foo: "123", bar: "456", baz: "789" }

// case 1 - this.state is cleared out, all state variables are removed
// this.state is {}

// case 2 - this.state is cleared out and new variable(s) introduced
// this.state is { qux: "lately introduced state variable" }

Answer 1

is it possible to remove all state variables and update the state by adding new variables as in the cases below without mutating(this.state) the state directly

I could be wrong, but I don't think this is possible.

When you set up state for your component, you're establishing a model for your component to adhere to, so wiping out the attributes of your components state (rather than updating them) breaks the principles of state management in react. I believe this is in part the motivation for removing replaceState

see https://github.com/facebook/react/issues/3236 for more information

Think about the difference between ice and water (the key difference being temperature). Temperature never disappears from the equation, it just changes value, and the water responds accordingly. Stateful react components operate under similar principles.

By establishing a model for your component we create a contract between the 2 and can make changes to our UX in a predictable manner.

You can of course update these values to be null, undefined, 0, false, etc but you cannot remove them from the signature of your initial state once it is created.

You could easily accomplish this with nested state however:

this.state = { foo: { bar: { baz: 'buzz' } } }

// remove state.foo.bar
this.setState({ foo: {} })

Answer 2

Well, no. As far as I know you are not able to go around this but with this.state = {} as you already know. However, I can't imagine case where you want to clear your state completely, but I can imagine you want to reset the state sometimes. This could be done by following

class Cmp extends React.Component {
  getClearState() {
    return {
      foo: undefined;
      bar: undefined;
      baz: undefined;
      qux: undefined;
    }
  }

  caseOne() {
    this.setState(this.getClearState())
  }

  caseTwo() {
    this.setState({
      ...this.getClearState(), 
      qux: 'my QUX',
    })
  }

  render() {}
}