Why use `useEffect` to avoid hydration error?
Answered
piscopancer posted this in #help-forum
Original message was deleted.
Answered by piscopancer
I seem to understand what's going on. The mismatch between server and client lists occurs because this function runs twice - once by server, once by client - and as
prepareCards shuffles the list, the results differ3 Replies
piscopancer
If I apply logic to conclude that the following code is correct, Next throws hydr error at me
const [cards, setCards] = useState<TMemoGame['cards']>(prepareCards(props.cards))I hate it because I am having an aesthetic issue as cards do not instantly appear on the page, only is the js loaded they will also appear. It makes layout shift
piscopancer
I seem to understand what's going on. The mismatch between server and client lists occurs because this function runs twice - once by server, once by client - and as
prepareCards shuffles the list, the results differAnswer