reactjs / reactjs/react.dev

[Suggestion]: remove the caveat for writing ref in render path

Ouverte
#6,925 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

type: documentation
Langage dominant
JavaScript
Étoiles
11.8k
Forks
7.9k
Merge moyen
1 j 11 h
PR mergées (30 j)
11

Description

Summary

In the doc for ref https://react.dev/reference/react/useRef#caveats, it calls out to not read/write ref in rendering phase without a very clear "bad example"

Page

No response

Details

However, there is use case where the caller just needs a static ref at component level to wrap a dynamic value: for example, I need to read/write a static ref in rendering path (keep it in-sync with the current render context value)

In another word, the argument could be "a need to read/sync a "render context" value into a static variable attached to the functional component", + the "ref" value is not use in the "return" of the functional component

const { componentId, renderId } = useContext(componentContext);
const context = { componentId, renderId } <--- dynamic

const contextRef  =  useRef(context); <--- static
contextRef.current = context;

useQuery({
  context: contextRef  <--- static ref to avoid equal check, the ref value is only used for logging
})

e.g. https://github.com/apollographql/apollo-client/issues/11835

and there are popular library like useLatest implemented by writing ref in render path

Can we remove or update the caveat to make it more clear? E.g. adding

If you don't attempt to use the "mutable" ref in determining the function return, it is fine to use it to sync rendering context

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

Examinez la section des réserves de useRef à l’adresse https://react.dev/reference/react/useRef#caveats et comparez ses indications avec l’issue Apollo Client et l’implémentation de useLatest liés dans le rapport. Déterminez si la réserve doit être supprimée ou révisée pour les refs synchronisées pendant le rendu sans affecter la valeur de retour du composant, puis mettez à jour la documentation et vérifiez que la formulation obtenue est dépourvue d’ambiguïté.

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

Évaluation

Stack technique
javascript, react
Domaine
documentation
Type d'issue
Documentation
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

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