beforesemicolon / flatlist-react

A helpful utility component to handle lists in react like a champ
MIT License
95 stars 17 forks source link

SSR: hydration issues on Next.js #93

Closed habovh closed 1 year ago

habovh commented 1 year ago

FlatList Version : 1.5.3

Describe the bug When <FlatList /> is used in a page, the server-side rendered version and the client version cannot be reconciliated, and hydration fails. Read more about hydration error here: https://nextjs.org/docs/messages/react-hydration-error

Steps to reproduce the behavior : Add <FlatList /> component on a page. list prop can even be an empty array. E.g:

<FlatList
  list={[]}
  renderItem={() => (
    <div />
  )}
/>

Expected behavior : Hydration should succeed and Next.js should not throw an error

Desktop (please complete the following information):

Screenshots Screenshot 2022-11-01 at 17 53 04

ECorreia45 commented 1 year ago

I can't replicate this with a plain next(version 13.0.4) app

Screenshot 2022-11-18 at 11 51 48 PM Screenshot 2022-11-18 at 11 53 27 PM

I was able to render just fine

Screenshot 2022-11-18 at 11 54 08 PM Screenshot 2022-11-18 at 11 54 02 PM

@habovh Please check your setup or share more info.