search

edmundhung / conform

A type-safe form validation library utilizing web fundamentals to progressively enhance HTML Forms with full support for server frameworks like Remix and Next.js.
https://conform.guide
MIT License
2k stars 107 forks source link

`key` is not stable on server and client #640

Closed jansedlon closed 5 months ago

jansedlon commented 5 months ago

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

image

Additional context

No response

edmundhung commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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.