react / react/react-native-website

Example showing need for FlatList extraData prop is misleading

Aperta
#5,216 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Lingua principale
MDX
Stelle
2.2k
Fork
6.3k
Merge medio
11h 37m
PR unite (30g)
19

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Inizia dal secondo esempio all’indirizzo reactnative.dev/docs/flatlist#example, poi leggi l’issue 1529 e la pull request 2634 collegate per esaminare il contesto precedente. Confronta il comportamento dell’esempio con e senza extraData e verifica le indicazioni attuali su FlatList prima di modificare la documentazione. Il lavoro è completato quando l’esempio e la spiegazione descrivono accuratamente quando è necessario extraData.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
react-native
Ambito
documentation
Tipo di issue
Documentazione
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Attiva
Chiarezza
Abbastanza chiara
Idoneità per principianti
48/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.