instanceCounterMap and Remix

[SimonVanherweghe]

Question

I'm writing an LTI in Remix and I get some hydration errors. I've implemented the InstUISettingsProvider with the instanceCounterMap. As far as I can grasp it, it lists all the components in the document and hands out an ID for them, right?
This doesn't seem to work for Remix, probably because they handle it differently than Nextjs. But I can't pinpoint where it -exactly- goes wrong. Any ideas?

When I run it without the instanceCounterMap, the ID's keep on incrementing with every refresh. How does this happen?

Maybe this question could be coupled to #1415

Code Sample

https://github.com/devinekask/remix-instructureui

excerpt from the logs:

+ id="RadioInput_1"
- id="RadioInput_0"
...
+ id="RadioInput_3"
- id="RadioInput_1"
...
+ id="RadioInput_5"
- id="RadioInput_2"

Additional Details

I also asked the Remix community about this issue.

[HerrTopi]

Hi!

I am not too familiar with remix, but this seems strange to me. By refresh, you mean f5, page refresh? If so, I think remix does something behind the scenes which persists some things?

What instanceCounterMap does is that it keeps a log of the number of "registered" components by type. If a component needs an id, it'll go to the instanceCounterMap and asks for a new one. It'll get a unique id based on its name and the number of same-type components that came before. This is the idea.

What's not working exactly? Do the ids duplicate? Or no id gets assigned?

[SimonVanherweghe]

Yes, I mean a page refresh

The ID's differ from what the SSR is generating and what the frontend hydration generates (I hope I'm using the right terminology here)