When is it safe to save state in React?
<p>Let's say I have a react component that updates state from a form.</p>

<pre><code>class Form extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      someCheckboxState: false,
    }
  }
  render() {
    return (
      &lt;input onChange={this.handleChange} checked={this.state.someCheckboxState} /&gt;
    );
  }
  handleChange(event) {
    this.setState({
      someCheckboxState: event.target.checked,
    });
  }
}
</code></pre>

<p>Now I want to send that state to the server (or somewhere). If I just do this</p>

<pre><code>handleChange(event) {
  this.setState({
    someCheckboxState: event.target.checked,
  });
  SendStateToServer(JSON.stringify(this.state)); // BAD! Not yet mutated
}
</code></pre>

<p>I could put it in <code>render</code> but then it will get sent to the server on initial render as well as well and it seems silly to send state a function called <code>render</code>.</p>

<p>When is it okay to persist/serialize the state?</p>