react / react/react-native-website

Example showing need for FlatList extraData prop is misleading

Offen
#5,216 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Vorherrschende Sprache
MDX
Sterne
2.2k
Forks
6.3k
Ø Merge
11 Std. 37 Min.
Gemergte PRs (30 T.)
19

Beschreibung

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} to FlatList we make sure FlatList itself will re-render when the state changes. Without setting this prop, FlatList would 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

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne mit dem zweiten Beispiel unter reactnative.dev/docs/flatlist#example, lies anschließend das verlinkte Issue 1529 und den Pull Request 2634, um den bisherigen Kontext zu erfassen. Vergleiche das Verhalten des Beispiels mit und ohne extraData und überprüfe die aktuelle FlatList-Dokumentation, bevor du die Dokumentation änderst. Fertig ist die Aufgabe, wenn das Beispiel und die Erklärung genau beschreiben, wann extraData benötigt wird.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
react-native
Bereich
documentation
Issue-Typ
Dokumentation
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Aktiv
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
48/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.