Hydration Issue nextjs

[Leykwan132]

https://stackoverflow.com/questions/68110629/nextjs-react-recoil-persist-values-in-local-storage-initial-page-load-in-wrong/73536131?noredirect=1#comment129857349_73536131

I've gone through this question but the value stored in the state of my atom is an object that is returned by an API call which is relatively complex compared to the boolean value mentioned in the stackoverflow question above. Unlike the case above, I don't think I can set the value of SSR to be the same as the CSR. How should I handle the hydration? Or can I just ignore the issue? WIll it impact the website when it is deployed to production?

[zero734kr]

Any progress here? Personally I ended up moving the recoil state call to another wrapper component and forced to CSR with next/dynamic like below:

import dynamic from 'next/dynamic'

// ... 
const SomeRecoilStateWrapper = dynamic(
  () => Promise.resolve(SomeRecoilStateContainer),
  { ssr: false }
)

function SomeRecoilStateContainer () {
  const value = useRecoilValue(...) // recoil atom using recoil-persist

  // ...
}

But I would really like to see a better solution here

[RizqiSyahrendra]

I thought this kind of problem has been fixed on #24 , don't know why this problem has still appeared now

[joacub]

there is a missmatch error using recoil, when you use concurrent mode or startTransition, recoil-persist get hydrated before all render and this does not match with server at all ofcourse

[kensoz]

same here. in my case atom is an Array.

Here is a simplified code, and sorry for my bad English. When the button is clicked, the ID of the clicked item will be saved to atom recoilTest array. Then the icon below will determine whether to display a star or a heart according to the ID in atom recoilTest array. Click, then refresh the page, there will be a Hydration Issue.

.tsx

...
<button type='button' onClick={() => onClick( {id: e.id} )}>
  <FontAwesomeIcon icon={recoilTest.findIndex((i) => i.id === e.id) !== -1 ? faStar : faHeart} />
</button>
...

recoil.ts

const { persistAtom } = recoilPersist()

export const recoilTest = atom({
  key: 'recoilTest',
  default: [{id: '1'}],
  effects_UNSTABLE: [persistAtom],
})

next: 12.3.1 react: 18.2.0 recoil: ^0.7.5 recoil-persist: ^4.2.0

[joshephan]

same here.

this issue has been quite long nobody answer :(

is recoil project dead?

[polemius]

I have added a section to README