Random order of rendered elements - hydration mismatch error
Answered
Yacare Caiman posted this in #help-forum
Yacare CaimanOP
Hey, I have an array of elements that I need to render in random order on component mount. I tried to set the random order in the useState initial function
but this leads to hydration mismatch error.
Other idea I had is using useEffect with an empty dependency array and setting the state there, but that solution doesn't seem that clean.
Is it possible to do in any other way?
useState(() => shuffledArray(INITIAL_ARR))but this leads to hydration mismatch error.
Other idea I had is using useEffect with an empty dependency array and setting the state there, but that solution doesn't seem that clean.
useEffect(() => {setRenderedArray(shuffledArray(INITIAL_ARR))}, [])Is it possible to do in any other way?
Answered by West African Crocodile
I think for this problem you may have 2 solutions
The first one is the solution that you have come up with which is shuffling the array after the component has been rendered
The second solution is to use lazy loading to load that component completely on the client side which won't cause a hydration error
The first one is the solution that you have come up with which is shuffling the array after the component has been rendered
The second solution is to use lazy loading to load that component completely on the client side which won't cause a hydration error
13 Replies
West African Crocodile
I think for this problem you may have 2 solutions
The first one is the solution that you have come up with which is shuffling the array after the component has been rendered
The second solution is to use lazy loading to load that component completely on the client side which won't cause a hydration error
The first one is the solution that you have come up with which is shuffling the array after the component has been rendered
The second solution is to use lazy loading to load that component completely on the client side which won't cause a hydration error
Answer
Yacare CaimanOP
The lazy loading seems like a good idea. I might end up doing that.
Yacare CaimanOP
I think it can't be even lazy, I believe it has to be dynamic with SSR disabled.
Hm, it seems like it is working without the option
{ssr: false} That seems counterintuitive. What is going on there?West African Crocodile
it should work with ssr option set to false
I don't know if it's going to work without it or not
I don't know if it's going to work without it or not
Yacare CaimanOP
It seems to be working without it being set to false - which is weird...
Yacare CaimanOP
It seems to be working incorrectly with the lazy - it shows rendered components, then the suspense kicks in and then it finally loads in a shuffled order. No hydration error but unfortunately that doesn't work for me. Seems like I'll have to use the dynamic with
{ssr: false} or the useEffectOh, unfortunately with the dynamic it just pops in so late. Seems like useEffect it is 😦
I think I might have gone down the rabbit hole of using next where it should've been SPA.
West African Crocodile
Yes it won't appear immediately it will take some time that's because it's lazy loaded so you may handle it with setting a loading component in the beginning until it mounts
@West African Crocodile Yes it won't appear immediately it will take some time that's because it's lazy loaded so you may handle it with setting a loading component in the beginning until it mounts
Yacare CaimanOP
It was weird when I used React lazy - it appeared in some order, only then the suspense kicked in and then it appeared in another order.
Yacare CaimanOP
Okay, I ended up going with dynamic, with ssr: false. If anyone has any other suggestions I'm open to them 🙂
If anyone knows any other way I'd be happy to hear that