fix: prevent dnd hydration errors

[remziatay]

Description

When rendering more than one board with SSR, hydration sometimes fails like this:

This is because dnd-kit is generating ids on the fly and sometimes generated ids don't match between server and client. This has been resolved on dnd-kit side but it's an opt-in change. This PR uses id prop on DndContext to guarantee server and client side ids always match

Type of change

• Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

Not possible to verify the fix itself on storybook since it doesn't do SSR

• Verified storybook dnd examples work as before

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
react-chessboard	Ready	Preview	Comment	Sep 6, 2025 11:23pm

[Clariity]

Thank you for raising this. The component already takes an id prop for use when rendering multiple boards, do you think we could use that instead of useId?

[remziatay]

Thank you for raising this. The component already takes an id prop for use when rendering multiple boards, do you think we could use that instead of useId?

Of course, done. I used dnd- prefix but let me know if you had a different approach in mind. I can adjust that

[github-actions]

🎉 This PR is included in version 5.6.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀