`key` is not stable on server and client

[jansedlon]

Describe the bug and the expected behavior

key of fieldlist is changing when on server vs on client. This causes hydration mismatches when using libraries like @hello-pangea/dnd because it expects the same draggableId on the server and on the client.

The workaround is to wrap the affected component on ClientOnly but this is a lucky workaround for me because it happens on initially invisible content, user has to get through tabs to get there. If it was on a place which can be seen initially, it would cause a flash

Conform version

v1.1.3

Steps to Reproduce the Bug or Issue

This codesandbox shows that the id on the server and on the client do not match codesandbox

What browsers are you seeing the problem on?

Chrome

Screenshots or Videos

Additional context

No response

[edmundhung]

The field.key provided is only used for React element and so it is not stable as you said. I am not familiar with the library you are using but maybe you can use field.id instead if you are looking for a stable id.

[jansedlon]

I think the drag and drop library remounts the components. Is it possible that the ids then change? If i switch over to field.id, after first drag and drop it complains that the id was not found.

Here's full repro.

You can toggle the lines 103 and 104. If draggableId is using key, there's a mismatch. If it's using id, the id doesn't exist after drag and drop an reorder

[jansedlon]

Okay I hate this. Seems like both key and draggableId must be field.id and then it seems like it works. I'm really sorry Edmund for your wasted time.