in-place updates (rendering optimizations) not working for input component

[lsimone]

I created a minimal commented react codesandbox to clearly show expected and actual outcome.

I read what you documented about in-place updates but I did not find much information.

Here I can read:

With signals we can bypass Virtual DOM rendering and bind signal changes directly to DOM mutations. If you pass a signal into JSX in a text position, it will render as text and automatically update in-place without Virtual DOM diffing:

Maybe input's value is not considered to be "a text position" so behavior I experienced is consistent and in that case I would like to ask you if you think you will support in-place update for this in the future;

otherwise, my codesandbox (I left a comment trying to be as clear as possible) shows that when using <input value={whateverStringSignal}>, your component will re-render and it cannot count on optimizations.

In both cases: is there a way to achieve this with signals (and some custom code maybe) right now?

References:

• https://preactjs.com/blog/introducing-signals/
• https://preactjs.com/guide/v10/signals#rendering-optimizations

[JoviDeCroock]

I don't think this is possible in React with how controlled components and stuff interact, luckily the DOM itself already behaves that way when you use the default behavior! Typing in an input only reflects in JS when you bind the onChange and perform setState calls. Libraries like react-hook-form already use this to do performant updates.

These optimizations however should work in Preact 😅 https://codesandbox.io/s/restless-rgb-qvxdhl?file=/src/index.js