useValue and hidden inputs?

[jdiamond]

useValue with hidden inputs is not re-rendering. Is it because hidden inputs don't emit input events?

[jdiamond]

This is what I ended up using:

type HiddenInputProps = {
  name: string;
  value: string;
};

function HiddenInput({ name, value }: HiddenInputProps) {
  const ref = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (ref.current) {
      ref.current.dispatchEvent(new Event("input", { bubbles: true }));
    }
  }, [value]);

  return <input ref={ref} type="hidden" name={name} value={value} />;
}

[esamattis]

Yes, you are correct, hidden inputs cannot emit input events or more generally adding or programmatically modifying an input in a form does not generate any events.

Your workaround can work in some situations but in general that is an antipattern in React because it goes against the "one way data flow" idea because it can lead to infinite rending loops. More "reacty way" would be to lift up your the state in the component tree that generates the value prop for the hidden input and use that directly instead of reading it using useValue().

[esamattis]

In general there should be no need to use the useValue() hook for hidden inputs at all because the value must already in some React state which can be used directly. Otherwise you would not be able to render the hidden input value.

Could you possibly elaborate your you case?

[jdiamond]

I am using a custom select component that does not use any native input or select elements, so I added a hidden input to hold the value as documented in your README to get it to work with Zorm. It works great and we don't have to control any of the fields in most of our forms now.

There are a few cases where we want to conditionally show/hide other fields based on the current value of our custom select component and this is where I wanted to use useValue.

Instead of lifting the state out of the custom select component and into our forms, I replaced the native hidden input element inside the custom select component with the HiddenInput component I shared above. Now useValue works and we don't have to pollute our form components with all the useState/value/onChange boilerplate. The ergonomics of Zorm's API is so much nicer than controlled inputs, IMO.

Since the value of the hidden input is encapsulated inside the custom select component and the only way to change it is when the user interacts with the UI, I don't think there's any danger of infinite rendering loops? At least we haven't run into any issues in the past week since we've been using it in multiple forms and been loving the simplicity of it.

[esamattis]

Since the value of the hidden input is encapsulated inside the custom select component and the only way to change it is when the user interacts with the UI, I don't think there's any danger of infinite rendering loops?

Probably not.

The rendering loop can happen because rendering the HiddenInput component triggers the input input event, now if some parent component reads that value from the event, changes it a bit, passes it to the HiddenInput which again triggers the input event. Hence looping.

If you are sure this won't happen, you'll be fine.

I do agree that useValue() is much nicer than controlled components 😊

But I think there's possibly a solution which makes the loop impossible and allows you to use the useValue() hook: Instead of useEffect() emit the input from a "on change" event of the component if it has one, and from that event emit the input events on the hidden inputs. Unfortunately depending on your specifics this might get tricky because you'll need to be able find the correct hidden inputs from the "on change" event to emit the events on.

Here's an example with React Select:

https://codesandbox.io/s/eloquent-hofstadter-218lvs?file=/src/App.tsx:847-1660

Not very pretty but at least the implementation is encapsulated inside the component...

[esamattis]

But I think there are some possibilities where React Zorm could make this easier. It could implement a proprietary "form change" event that could be emitted anywhere on the form by Zorm users when a hidden input changes and react to that.

Another option would be to use MutationObserver to automatically detect the hidden input changes in useValue(). That could have some performance concerns though.

Thanks for the feedback! Will look into this 👍