React: useCallback renvoie undefined lorsque le composant est rendu côté serveur

Créé le 15 nov. 2018  ·  4Commentaires  ·  Source: facebook/react

Vous souhaitez demander une fonctionnalité ou signaler un bug ?

Bogue.

Quel est le comportement actuel ?

React.useCallback renvoie undefined lorsque le composant est rendu côté serveur.

Si le comportement actuel est un bogue, veuillez fournir les étapes à reproduire et si possible une démo minimale du problème. Collez le lien vers votre exemple JSFiddle (https://jsfiddle.net/Luktwrdm/) ou CodeSandbox (https://codesandbox.io/s/new) ci-dessous :

Ce bogue peut être reproduit en créant un composant React à l'aide d'un useCallback . L'enregistrement de la valeur de retour sur le serveur génère undefined alors qu'il renvoie correctement la fonction dans le navigateur.

Vous pouvez observer ce bug dans cette CodeSandbox : https://codesandbox.io/s/r557kww6wn L'application est correctement rendue à un bug de chaîne en regardant la console, vous verrez que la valeur de retour de useCallback est undefined .

Voici exactement la même application mais rendue sur le client : https://codesandbox.io/s/xvwv797pxz La fonction est correctement connectée à la console.

Quel est le comportement attendu ?

React.useCallback doit renvoyer le rappel mémorisé, pas undefined .

Quelles versions de React et quel navigateur/OS sont concernés par ce problème ?

  • réagir : 16.7.0-alpha.2
  • réaction-dom : 16.7.0-alpha.2
Hooks Bug

Commentaire le plus utile

Je crois que c'est un bogue ; ce commentaire de code est faux. Je crois comprendre qu'il est correct d'utiliser useCallback pour les rappels de phase de rendu.

Tous les 4 commentaires

C'est un comportement intentionnel.

Les rappels ne sont pas exécutés sur l'environnement du serveur.

Je suppose que la raison en est que, puisque les rappels sont destinés à être utilisés avec des gestionnaires d'événements tels que onClick , qui n'ont pas de sens pendant la SSR, React n'a pas vraiment besoin de les suivre, libérant des ressources qui seraient utilisées inutilement en gardant une trace des crochets qui ne seraient jamais utilisés.

Ne vous inquiétez pas, lors de la réhydratation, les rappels seront là.

Mais, puis-je vous demander ce que vous essayez de faire exactement ?

Merci @arianon 👌 Je redux- react useCallback avec leur useMappedState . Conceptuellement, la fonction que je mémorise n'est pas vraiment un rappel. Je n'y ai pas prêté attention au début parce que le terme a tendance à être utilisé dans une variété de contextes. De plus, la documentation mentionne que :

useCallback(fn, inputs) équivaut à useMemo(() => fn, inputs) .

Je vais ouvrir un ticket sur le dépôt docs pour proposer une mise à jour 😉 Merci encore !

Je crois que c'est un bogue ; ce commentaire de code est faux. Je crois comprendre qu'il est correct d'utiliser useCallback pour les rappels de phase de rendu.

AFAICT les seules choses qui ne devraient pas s'exécuter côté serveur sont les effets et l'initialisation de l'attribut ref. Un useCallback fonctionnel est important, par exemple, pour le modèle HOC de l'accessoire de rendu, qui restera longtemps dans l'écosystème.

Cette page vous a été utile?
0 / 5 - 0 notes