Quand utilisez-vous useRef plutôt que useState ?

Utilisez useRef quand vous avez besoin d'une valeur mutable qui survit aux rendus mais ne doit pas en déclencher un : un nœud DOM, un id de minuteur, la valeur précédente d'une prop, un drapeau qui note qu'une chose a déjà eu lieu. Utilisez useState quand la valeur doit apparaître dans l'interface, parce qu'écrire dans une ref ne planifie aucun rendu. La règle empirique est simple : si l'écran doit changer, c'est de l'état.

La ligne de partage, c'est de savoir si changer la valeur doit repeindre l'écran. L'état, oui ; une ref, non. Donc une ref, c'est là que je mets tout ce qui relève de la comptabilité interne plutôt que de l'interface : le nœud DOM que je dois cibler ou mesurer, un id d'intervalle que je dois nettoyer au démontage, la dernière valeur d'une prop pour pouvoir comparer, un drapeau du genre est-ce que je l'ai déjà fait. L'erreur classique, c'est de stocker quelque chose dans une ref et de se demander pourquoi l'interface ne se met jamais à jour, et l'image miroir, c'est de mettre une position de défilement dans l'état et de refaire le rendu à chaque événement de scroll. Je garde aussi la règle de ne pas lire ni écrire de refs pendant le rendu, seulement dans les effets et les gestionnaires d'événements, parce que pendant le rendu React attend une fonction pure et une lecture de ref peut donner des valeurs différentes d'une passe à l'autre. Un changement agréable dans React 19, c'est que ref est désormais une prop normale pour les composants fonction, donc j'ai arrêté d'envelopper les choses dans forwardRef.