Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SSR: hydration issues on Next.js #93

Closed
habovh opened this issue Nov 1, 2022 · 1 comment
Closed

SSR: hydration issues on Next.js #93

habovh opened this issue Nov 1, 2022 · 1 comment
Assignees

Comments

@habovh
Copy link

habovh commented Nov 1, 2022

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):

  • OS: macOS Ventura (13.0)
  • Browser: Safari
  • Version: 16.1

Screenshots
Screenshot 2022-11-01 at 17 53 04

@ECorreia45
Copy link
Collaborator

ECorreia45 commented Nov 19, 2022

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants