Sticky headers in SectionList cause unnecessary item re-rendering and visual glitches #43597
Labels
Component: SectionList
Issue: Author Provided Repro
This issue can be reproduced in Snack or an attached project.
Newer Patch Available
Description
I am experiencing a rendering issue when using sticky headers on a section list with virtualization. The recording below shows the behavior - the section items seem to disappear while the section headers re-render. Eventually the section headers "catch up" to the currently visible section. Logging each time
renderItem
is called per element shows that items earlier in the list are rendered many times despite never scrolling up.Weirdly enough this issue only appears when stickySectionHeadersEnabled is set to true and when the list has virtualization enabled (e.g. disableVirtualization is set to false).
See the reproducible Snack here
section-list-test-1.mov
Steps to reproduce
Log Item Map
button to log how many times each item has been rendered to the consoleReact Native Version
0.73.6
Affected Platforms
Runtime - Android, Runtime - iOS
Output of
npx react-native info
Stacktrace or Logs
Reproducer
https://snack.expo.dev/@zacdev/section-list-investigation
Screenshots and Videos
See description above.
The text was updated successfully, but these errors were encountered: