How to handle early input to isomorphically rendered forms

Question

I have a React app that includes a form, which is rendered server side, prepopulated with the user's work in progress. The problem is that if the user edits a value in the form before the app loads, then the app is unaware of the change. When the user saves, the unchanged data that was rendered by the server is re-saved, and the user's new data is dropped, although it is still shown in the form. In short, there seems to be a disconnect between React and input values in the markup that it replaces when initially loading.

I suppose I could put refs on every input and copy their values into the application state on componentDidMount, but there has got to be a better way. Has anyone else solved this problem?

Update

I am now of the opinion that the best way to solve this would be to have React take input values into account when creating checksums. GH issue: https://github.com/facebook/react/issues/4293

Answer 1

I suppose I could put refs on every input and copy their values into the application state on componentDidMount, but there has got to be a better way. Has anyone else solved this problem?

Browsers autofilling fields or remembering previous values across refreshes can also cause what is effectively the same issue - your app's view of the data being different from the user's.

My brute-force solution in the past has been to extract the complete form state from its inputs onSubmit and re-run validaton before allowing submission to proceed.

Using componentDidMount as you suggest sounds like a more elegant solution as it avoids the user entering invalid data and being allowed to try to submit it before they get any warnings. You don't need to add a ref to every input, though; just add one to the <form> and use its .elements collection to pull all the data.

Suggested solution:

1. In componentDidMount(), pull the form's data from its .elements (I extracted get-form-data from my form library for this purpose)
2. Check each field's current value against what's in your app's state.
3. If a field's current value is different, treat it just as you would new user input arriving via an event - update it in state and re-run any associated validation routines.

Then from componentDidMount() onwards, your app and the user will always be on the same page (literally).