Hydration error in useListOrganizations hook
Describe the bug
The useListOrganizations hook is causing React hydration mismatches between server and client rendering.
next-forge version
I am using version 3.2.28
To Reproduce
Steps to reproduce the behavior:
1. Create a component that uses authClient.useListOrganizations()
2. Implement conditional rendering based on loading states (isPending, isRefetching)
3. Use this component in a server-rendered page
4. Load the page and check browser console (do it multiple times, it does not happen always)
5. See hydration error: "Hydration failed because the server rendered HTML didn't match the client"
Expected behavior
Either provide the same initial data on both server and client
Or defer showing loading states until after hydration is complete
Handle the synchronization internally in the hook implementation
Not require per-component workarounds for hydration issues
Screenshots
Error:
<img width="1374" alt="Image" src="https://github.com/user-attachments/assets/c23e6b91-fecb-49e6-b7c4-3d3ba560f3d1" />
Component:
!Image
Workaround:
!Image
Desktop (please complete the following information):
- OS: MacOs
- Browser: Happening in both, Chrome and Safari (in incognito to prevent extensions messing around)
The useListOrganizations hook is causing React hydration mismatches between server and client rendering.
next-forge version
I am using version 3.2.28
To Reproduce
Steps to reproduce the behavior:
1. Create a component that uses authClient.useListOrganizations()
2. Implement conditional rendering based on loading states (isPending, isRefetching)
3. Use this component in a server-rendered page
4. Load the page and check browser console (do it multiple times, it does not happen always)
5. See hydration error: "Hydration failed because the server rendered HTML didn't match the client"
Expected behavior
Either provide the same initial data on both server and client
Or defer showing loading states until after hydration is complete
Handle the synchronization internally in the hook implementation
Not require per-component workarounds for hydration issues
Screenshots
Error:
<img width="1374" alt="Image" src="https://github.com/user-attachments/assets/c23e6b91-fecb-49e6-b7c4-3d3ba560f3d1" />
Component:
!Image
Workaround:
!Image
Desktop (please complete the following information):
- OS: MacOs
- Browser: Happening in both, Chrome and Safari (in incognito to prevent extensions messing around)
Was this page helpful?
