title: How to clear out state variables in React?
body: <p>Since support for <code>replaceState</code> is removed and <code>setState</code> does <a href="https://reactjs.org/docs/state-and-lifecycle.html#state-updates-are-merged" rel="noreferrer">shallow merging</a>, is it possible to remove all state variables and update the state by adding new variables as in the cases below without mutating(<code>this.state</code>) the state directly?</p>
  
  <pre><code>// 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" }
  </code></pre>