Input elements are sometimes reused in other components

[BenoitZugmeyer]

With preact-router, I am building two similar pages (a signin form and a signup form), and I noticed that when the user starts to fill the signin form and switches to the signup form, the values he entered in the signin form may appear in the signup form. Then switching signup and signin pages back and forth, the values are still showing up in some inputs.

I tried to isolate the issue and it seems that preact is sometimes reusing elements. Here is an illustration of the problem. I could have probably made a simpler example but I hope it's still easily undestandable.

This may be related to preactjs/preact-router#192

[developit]

This should be fixed when we kill component recycling.

[krokofant]

@developit Is this planned? 😅

[developit]

yes.

[natevw]

I suspect this is causing a bug in my app, but wanted to confirm:

1. My app has many "pages", with each page living in a component
2. One of these pages has some uncontrolled (defaultValue) <input>s

After rendering many other pages (some of them containing their own inputs), returning to the page with uncontrolled inputs has them showing with an earlier value rather than the expected defaultValue. After much confusion and troubleshooting of my own code, I tracked it down to the "new" input being === to the earlier one, and so the previous .value was taking precedence over the .defaultValue.

Is this still an element recycling issue? I'm seeing a "now that recycling is gone this probably counts as a bug" at #941 (comment) (pre-dating your still-planned response here) and I think there may be some distinction between component vs. element recycling?

What is the second best workaround for this issue? (I expect the best workaround is convert to handling these as controlled components? ;-)

[billneff79]

Possibly related to issue #993

[natevw]

Via #769 (comment) I tried with the "scratch/perf" branch (commit 7a8e824).

This did make the unexpected input values go away, so apparently at least some sort of element recycling is still present in preact@8.2.7 which is gone on that old branch.

[HenrikJoreteg]

Yo @natevw! I hope you're well, buddy. I know it's been months, but also for whomever else stumbles across this... @developit was kind enough to spend a couple hours debugging something related to this issue and browser autofill behavior with me today. There's a way to forcibly avoid any recycling of elements.

All of this will be unnecessary in upcoming "preact x" release but this did fix the problem I was having in 8.2.9.

Here it is as a Higher Order Component courtesy of @developit: https://gist.github.com/developit/fa084f3cb38778f93d58607377f416a3

[marvinhagemeister]

We completely removed the component recycler for Preact X. The code just landed in master #1302 and should be available on npm as an alpha soon 🎉