title: How do I sync state from the DOM to my React Component in an Isomorphic Application?
body: <h2>My Problem</h2>
  
  <p>I am building an Isomorphic Application in <a href="https://facebook.github.io/react/" rel="noreferrer">React</a> which first renders a component server-side, then takes advantage of React's intelligent re-rendering browser-side.</p>
  
  <p>I have run into a situation where the DOM can become out of sync with the React component's state before React is able to first render browser-side. This can happen when the user is on a slow internet connection, and the <code>react.js</code> file takes a while to download <em>(which is also the reason I'm building an Isomorphic Application)</em></p>
  
  <h2>Example</h2>
  
  <p>Here is an example I put together to show this happening: <a href="http://jsfiddle.net/jesstelford/z4o44esb/" rel="noreferrer">http://jsfiddle.net/jesstelford/z4o44esb</a></p>
  
  <ul>
  <li>Run this example</li>
  <li>Togle the checkbox</li>
  <li>Click "Render React"</li>
  <li>The current React state is output in the console</li>
  <li>Note that it is still set to { done: false } which is incorrect</li>
  </ul>
  
  <pre class="lang-js prettyprint-override"><code>var TodoItem = React.createClass({
  
    // ...
  
    render: function() {
      return (
        &lt;label&gt;
          &lt;input type="checkbox" defaultChecked={this.state.done} onChange={this.onChange} /&gt;
          {this.props.name}
        &lt;/label&gt;
      );
    }
  });
  
  // User toggles checkbox ON here, before React is rendered browser-side
  
  // render using React browser-side
  var renderedComponent = React.render(component, document.getElementById('content'));
  
  // Incorrectly outputs { done: false }  
  console.log('React state:', renderedComponent.state);
  </code></pre>
  
  <h2>Possible <em>(Half)</em> Solution</h2>
  
  <p>I have found one possible solution using <a href="https://facebook.github.io/react/docs/more-about-refs.html" rel="noreferrer"><code>React refs</code></a>: <a href="http://jsfiddle.net/jesstelford/z4o44esb/2/" rel="noreferrer">http://jsfiddle.net/jesstelford/z4o44esb/2</a></p>
  
  <pre class="lang-js prettyprint-override"><code>var TodoItem = React.createClass({
  
    // ...
  
    syncStateFromDOM: function() {
      this.setDone(this.refs.done.getDOMNode().checked);
    },
  
    render: function() {
      return (
        &lt;label&gt;
          &lt;input ref="done" type="checkbox" defaultChecked={this.state.done} onChange={this.onChange} /&gt;
          {this.props.name}
        &lt;/label&gt;
      );
    }
  });
  
  // User toggles checkbox ON here, before React is rendered browser-side
  
  // render using React browser-side
  var renderedComponent = React.render(component, document.getElementById('content'));
  
  // Sync state from the DOM
  renderedComponent.syncStateFromDOM()
  
  // Correctly outputs { done: true }  
  console.log('React state:', renderedComponent.state);
  </code></pre>
  
  <p>The downsides to this approach are:</p>
  
  <ul>
  <li>the state is synced <strong>after</strong> the DOM is rendered</li>
  <li>Requires extra code external to the component itself to sync on first render</li>
  </ul>
  
  <h2>My Question</h2>
  
  <p>When pre-rendering a React Component server-side, is there any way to sync DOM state to that React Component before it has rendered browser-side, given the DOM has been manipulated by the user before React is loaded browser-side?</p>
  
  <p>Thanks!</p>