Example showing need for FlatList extraData prop is misleading
Nobody has claimed this yet.
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 48/100
- Issue type
- Documentation
- Clarity
- Mostly clear
- Activity status
- Active
- Tech stack
- react-native
- Domain
- documentation
Research direction
Start with the second example at reactnative.dev/docs/flatlist#example, then read the linked issue 1529 and pull request 2634 for prior context. Compare the example's behavior with and without extraData, and verify the current FlatList guidance before changing the documentation. Done means the example and explanation accurately describe when extraData is needed.
Written by the indexing model from the issue text.
Description
Basically https://github.com/react/react-native-website/issues/1529 from 2019 which was closed due to inactivity.
Related: https://github.com/react/react-native-website/pull/2634 which attempted to address this but unfortunately received no attention.
Description
The second example at https://reactnative.dev/docs/flatlist#example is introduced with
By passing
extraData={selectedId}toFlatListwe make sureFlatListitself will re-render when the state changes. Without setting this prop,FlatListwould not know it needs to re-render any items because it is a PureComponent and the prop comparison will not show any changes.
But if you delete the extraData prop everything works fine. Since renderItem closes over selectedId, it is recreated whenever selectedId changes (or on every single render if the react compiler is disabled), hence FlatList receives a new prop and re-renders properly as you'd expect.
Which makes me wonder: is there ever a need for extraData? Was it once necessary (perhaps in class component days, or old react native architecture) and is no longer needed?
I'm struggling to think of a scenario in which it's needed, other than an escape hatch for syncing with something outside react, or to opt back in to reactivity after making manual memoizations.
Currently the docs suggest it's necessary to make basic reactivity work, which is confusing.
Documentation version
0.87
- Dominant language
- MDX
- Stars
- 2.2k
- Forks
- 6.3k
- Avg merge
- 11h 37m
- Merged PRs (30d)
- 19
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from react/react-native-website
-
Difficulty 1/5 1-3 hours Newbie friendliness 88/100
react/react-native-website#5217 ·
-
Integration with Existing Apps: Podfile example does not use `use_react_native!`, is incomplete Open👋 Good first issue
Difficulty 1/5 Under an hour Newbie friendliness 78/100
react/react-native-website#2958 · 2 comments ·
-
:ghost: Missing Docs 👋 Good first issue
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
react/react-native-website#889 · 5 comments · 1 reaction ·
-
Difficulty 3/5 1-2 days Newbie friendliness 42/100
react/react-native-website#5154 · 6 comments ·
-
Never gets stale
Difficulty 2/5 1-3 hours Newbie friendliness 38/100
react/react-native-website#4265 · 2 comments ·
All issues in react/react-native-website
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
agilepathway/label-checker#640 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
BasedHardware/omi#15662 · 1 comment ·
-
documentation help wanted
Difficulty 2/5 1-3 hours Newbie friendliness 90/100
-
documentation good first issue
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
amponce/archive-movie-browser#167 ·
-
user-reported
Difficulty 2/5 1-3 hours Newbie friendliness 85/100
Kong/developer.konghq.com#7316 ·