Bug: form data is lost upon hydration

[OliverJAsh]

Related:

• Fire change events for changes made to inputs before hydration #12955
• [TextField] Bad behavior when user edits box before hydration with SSR mui/material-ui#34174
• https://stackoverflow.com/questions/73567117/how-to-deal-with-text-input-changes-in-ssr-text-box-before-hydration-is-complete

React version: 18.2.0

Steps To Reproduce

Link to code example: https://github.com/OliverJAsh/react-controlled-form-hydration-issue

Given this component which is used during SSR and then hydrated on the client-side:

import * as React from 'react';

export const App = () => {
  const [value, setValue] = React.useState('');

  const [, setCount] = React.useState(0);

  React.useEffect(() => {
    console.log('mount');

    setCount(1);
  }, []);

  return (
    <form>
      <div>Value: {value}</div>
      <input
        type="text"
        value={value}
        onChange={(e) => setValue(e.currentTarget.value)}
      />
    </form>
  );
};

1. Before hydration, enter text into the input.

The current behavior

After hydration, the input's value is set back to the initial state. The text entered by the user prior to hydration is lost.

Screen.Recording.2023-06-19.at.12.33.28.mov

The expected behavior

The text entered by the user prior to hydration should be preserved.

[nusr]

After the page is loaded, enter the text after 3 seconds, and the content will not be lost.
Or remove the setTimeout, and the content directly entered will not be lost.

[EnshaednHiker]

Is the setTimeout just to demonstrate the issue? Another way to test this issue is to throttle CPU and network speed in devtools, and then that setTimoueout is most likely not necessary. Fast 3G and 4x CPU slowdown might be something to try to start. The location of these tools recently changed in chrome, so for others following along, here's where they are today:

[OliverJAsh]

Yeah the timeout is to simulate delayed hydration e.g. due to slow JS.

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[OliverJAsh]

Bump

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!