feat(conform-react): stop relying on the state snapshot

[edmundhung]

Background

Conform uses useSyncExternalStore with subjects tracked by a proxy to achieve fine-grained subscription. This works fine generally.. but not in a callback the way you might want! As an example, imagine you are trying to log the message out if the input is not empty:

function Exmaple() {
  const [form, fields] = useForm({
    // ...
  }) 

  return (
    <form>
        <input
            {...getInputProps(fields.message)}
            onChange={event => {
                // Trying to access the latest value of message:
                if (fields.message.value) {
                    console.log(fields.message.value)
                }
            }}
        />
    </form>
  );
}

It will never logged anything unfortunately. Because Conform has no idea whether you need the value state and never subscribe it. The fields.message.value is outdated with the undefined value. To solve this, a kinda awkward approach is to explicitly subscribe it during render:

function Exmaple() {
  const [form, fields] = useForm({
    // ...
  })
  // Now the value is subscribed and Conform will trigger a re-render everytime value is changed.
  const messageValue = fields.message.value;

  return (
    <form>
        <input
            {...getInputProps(fields.message)}
            onChange={event => {
                if (messageValue) {
                    console.log(fields.message.value)
                }
            }}
        />
    </form>
  );
}

FYI, react-hook-form suffers from similar problem with proxy based subscription and you will find similar suggestions on their repository.

The reason why this happened is because useSyncExternalStore takes a snapshot from the form context and will use the same snapshot until a re-render is triggered. The form context is aware of the value changed internally but just the metadata is populating the outdated data from the snapshot. However, this is not a bug on React but rather an intentional design to avoid potential tearing with suspense.

Solutions

I have considered 2 solutions:

1. A new API to return the latest metadata

function Exmaple() {
  const [form, fields] = useForm({
    // ...
  }) 

  return (
    <form>
        <input
            {...getInputProps(fields.message)}
            onChange={event => {
                // `fields.message.latest` returns a field metadata using the latest metadata
                // Similar, you can access the latest dirty state by calling `form.latest.dirty`
                if (fields.message.latest.value) {
                    console.log(fields.message.latest.value)
                }
            }}
        />
    </form>
  );
}

2. Make all metadata always return the latest metadata

function Exmaple() {
  const [form, fields] = useForm({
    // ...
  }) 

  return (
    <form>
        <input
            {...getInputProps(fields.message)}
            onChange={event => {
                // Nothing changed. This will work just fine
                // The value is populated from the form context instead of the snapshot 
                if (fields.message.value) {
                    console.log(fields.message.value)
                }
            }}
        />
    </form>
  );
}

Personally, I prefer solution 2 (which is what implemented in this PR) as I believe the impact of tearing is minimal in the context of a form in which the whole form will always suspense together instead of some pieces suspense while some not. It will take sometime until the react ecosystem adopts the new paradigm anyway and Conform might already reach version 2 by that time with a different design. But I would love to hear what the community think.

[coji]

I was just getting into this issue and thanks to your help I was able to workaround it. I'm glad it's simple and easy to understand 2. I also found the difference between initialValue and defaultValue to be complicated, so having two similar things seems confusing.

[cloudflare-workers-and-pages]

Deploying conform with    Cloudflare Pages

Latest commit:	620e574
Status:	✅  Deploy successful!
Preview URL:	https://40bcbae8.conform.pages.dev
Branch Preview URL:	https://stop-relying-on-state-snapsh.conform.pages.dev

View logs