🔷 [Epic] Evaluate alternate OWA rendering flows

[mpeterdev]

Description

1. SSR to string
2. HTML MutationObserver

[mpeterdev]

Unfortunately, MutationObserver misses a key set of mutations we would need to propagate: properties. HTML attributes and properties have a lot of overlap, but MutationObserver can fire for changes to the former and not the latter. For more info on the difference, see this stack overflow answer

Example

Here we are controlling the value of an input field via a state variable. Clicking the button increments the state variable, which causes an update to the input contents. The change to the input would not be reported by a mutation observer because the change is to the value property. The value attribute of an input is always its initial value

export function Incrementer() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => { setCount(count + 1) }}>+1</button>
      <input type="number" value={count} />
    </div>
  );
}