My Problem

I am building an Isomorphic Application in React which first renders a component server-side, then takes advantage of React's intelligent re-rendering browser-side.

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 react.js file takes a while to download (which is also the reason I'm building an Isomorphic Application)

Example

Here is an example I put together to show this happening: http://jsfiddle.net/jesstelford/z4o44esb

Run this example

Togle the checkbox

Click "Render React"

The current React state is output in the console

Note that it is still set to { done: false } which is incorrect

var TodoItem = React.createClass({ // ... render: function() { return ( <label> <input type="checkbox" defaultChecked={this.state.done} onChange={this.onChange} /> {this.props.name} </label> ); } }); // 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);

Possible (Half) Solution

I have found one possible solution using React refs : http://jsfiddle.net/jesstelford/z4o44esb/2

var TodoItem = React.createClass({ // ... syncStateFromDOM: function() { this.setDone(this.refs.done.getDOMNode().checked); }, render: function() { return ( <label> <input ref="done" type="checkbox" defaultChecked={this.state.done} onChange={this.onChange} /> {this.props.name} </label> ); } }); // 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);

The downsides to this approach are:

the state is synced after the DOM is rendered

the DOM is rendered Requires extra code external to the component itself to sync on first render

My Question

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?

Thanks!