react / react/react-native-website

Example showing need for FlatList extraData prop is misleading

Ouverte
#5,216 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Langage dominant
MDX
Étoiles
2.2k
Forks
6.3k
Merge moyen
11 h 37 min
PR mergées (30 j)
19

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} 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

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Commencez par le deuxième exemple à l’adresse reactnative.dev/docs/flatlist#example, puis consultez l’issue 1529 et la pull request 2634 liées pour prendre connaissance du contexte antérieur. Comparez le comportement de l’exemple avec et sans extraData, et vérifiez les recommandations actuelles concernant FlatList avant de modifier la documentation. La tâche est terminée lorsque l’exemple et l’explication décrivent précisément dans quels cas extraData est nécessaire.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
react-native
Domaine
documentation
Type d'issue
Documentation
Difficulté
3/5
Temps estimé
1-2 jours
Activité
Active
Clarté
Plutôt claire
Accessibilité débutants
48/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.