Reusing logic with custom hooks #466
Conversation
Size changes📦 Next.js Bundle Analysis for react-devThis analysis was generated by the Next.js Bundle Analysis action. 🤖 Three Pages Changed SizeThe following pages changed size from the code in this PR compared to its base branch:
DetailsOnly the gzipped size is provided here based on an expert tip. First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If Any third party scripts you have added directly to your app using the Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 10% or more, there will be a red status indicator applied, indicating that special attention should be given to this. |
tdd
added
Pending Review
tdd
added
Reviewing
There was a problem hiding this comment.
Salut @linsolas !
Avant toute chose, merci pour tout ce boulot ! C'est super cool de nous filer un coup de main à nouveau ; après, tu as commencé par une page monstre, hein, tu aimes les défis 😉 Et du coup gros taf de revue, forcément.
Comme je m'y attendais, c'est globalement très bien, j'apprécie notamment le soin porté à des éléments typographiques (apostrophes notamment). On sent la fatigue s'installer vers la fin, avec davantage de mot-à-mot qui donne des VF ampoulées que j'ai dû davantage reformuler que plus tôt dans le texte.
Attention à "Effet" : c'est capitalisé pour une bonne raison, comme Hook. cf. la page "Synchroniser grâce aux Effets", qui précise bien le distingo. Je n'ai pas corrigé partout, mais je te laisse faire une repasse là-dessus. Idem pour Événement d’Effet (corrigé partout).
Vu que tu m'as déjà soumis une 2e PR, ce serait top si tu pouvais faire un commit d'ajustement qui reprendrait les points pertinents issus de mon feedback ici, comme ça je n'aurais pas à les doubler. Tu me fais un coucou après en commentaire sur la PR en question, et j'attaquerai sa revue à ce moment-là.
Bravo en tout cas pour ce méga taf, globalement très quali ! 👏
Avant de traiter les retours, lis bien TOUT ce message, notamment les consignes d'intégration optimale des retours par lot(s)
Tout est fait sous forme de Suggestions GitHub, il te suffit à chaque suggestion que tu approuves de
cliquer le bouton d'ajout au lot de modifs à committer (pas de commit direct !), et sur la fin de créer le commit groupé. (ce mode de regroupement en un seul commit est à favoriser absolument, mais tu devras aller dans l'onglet Files changed pour y accéder, il n'est pas utilisable dans l’onglet Conversation)
Si certaines appellent discussion, n'hésite pas, tu réponds, on en parle, on avance ensemble 🤝
Quand tout sera bouclé côté code, je ferai une repasse visuelle finale en local avant de fusionner. J'y recalerai si besoin les usual suspects : espaces insécables avant les ponctuations doubles, et apostrophes françaises.
Encore mille mercis, j'ai hâte de voir cette PR finalisée et dans main !
|
|
||
| You need to implement the `useDelayedValue` custom Hook. Its current implementation returns the `value` provided to it. Instead, you want to return the value back from `delay` milliseconds ago. You might need some state and an Effect to do this. | ||
| Vous devez implémenter le Hook personnalisé `useDelayedValue`. Son implémentation actuelle retourne la `value` qui lui a été donnée. À la place, vous voulez retourner la valeur qu’elle valait `delay` millisecondes plus tôt. Vous aurez peut-être besoin d’un état et d’un effet pour ça. |
There was a problem hiding this comment.
| Vous devez implémenter le Hook personnalisé `useDelayedValue`. Son implémentation actuelle retourne la `value` qui lui a été donnée. À la place, vous voulez retourner la valeur qu’elle valait `delay` millisecondes plus tôt. Vous aurez peut-être besoin d’un état et d’un effet pour ça. | |
| Vous devez implémenter le Hook personnalisé `useDelayedValue`. Son implémentation actuelle retourne la `value` qui lui a été donnée. Au lieu de ça, vous souhaitez retourner la valeur qu’elle avait `delay` millisecondes plus tôt. Vous aurez peut-être besoin d’un état et d’un Effet pour y arriver. |
|
|
||
| <Hint> | ||
|
|
||
| You'll need to store the `delayedValue` as a state variable inside your custom Hook. When the `value` changes, you'll want to run an Effect. This Effect should update `delayedValue` after the `delay`. You might find it helpful to call `setTimeout`. | ||
| Vous aurez besoin de stocker `delayedValue` comme variable d’état à l’intérieur de votre Hook. Quand la `value` change, vous devrez exécuter un effet. Cet effet devra mettre à jour `delayedValue` après le `delay`. Vous pouvez trouver utile d’appeler `setTimeout`. |
There was a problem hiding this comment.
| Vous aurez besoin de stocker `delayedValue` comme variable d’état à l’intérieur de votre Hook. Quand la `value` change, vous devrez exécuter un effet. Cet effet devra mettre à jour `delayedValue` après le `delay`. Vous pouvez trouver utile d’appeler `setTimeout`. | |
| Vous aurez besoin de stocker `delayedValue` comme variable d’état à l’intérieur de votre Hook. Quand la `value` change, vous devrez exécuter un Effet. Cet Effet devra mettre à jour `delayedValue` après le `delay`. Recourir à `setTimeout` pourrait s’avérer utile. |
|
|
||
| Does this Effect need cleanup? Why or why not? | ||
| Est-ce que cet effet a besoin de nettoyage ? Pourquoi ou pourquoi pas ? |
There was a problem hiding this comment.
| Est-ce que cet effet a besoin de nettoyage ? Pourquoi ou pourquoi pas ? | |
| Est-ce que cet effet a besoin de nettoyage ? Pourquoi (ou pourquoi non) ? |
| @@ -2408,7 +2409,7 @@ body { min-height: 300px; } | |||
|
|
|||
| <Solution> | |||
|
|
|||
| Here is a working version. You keep the `delayedValue` as a state variable. When `value` updates, your Effect schedules a timeout to update the `delayedValue`. This is why the `delayedValue` always "lags behind" the actual `value`. | |||
| Voici une version fonctionnelle. Vous conservez `delayedValue` comme variable d’état. Quand `value` change, votre effet planifie un compte à rebours pour mettre à jour `delayedValue`. C’est pourquoi `delayedValue` est toujours « en retard » sur `value`. | |||
There was a problem hiding this comment.
En temps normal je hurlerais sur "compte à rebours" pour timer (qui est le terme utilisé habituellement pour un setTimeout), mais sur ce coup-là c'est vraiment sympa et adapté 😉
| @@ -2485,7 +2486,7 @@ body { min-height: 300px; } | |||
|
|
|||
| </Sandpack> | |||
|
|
|||
| Note that this Effect *does not* need cleanup. If you called `clearTimeout` in the cleanup function, then each time the `value` changes, it would reset the already scheduled timeout. To keep the movement continuous, you want all the timeouts to fire. | |||
| Notez que cet effet n’a *pas besoin* de nettoyage. Si vous appelez `clearTimeout` dans la fonction de nettoyage, alors à chaque changement de `value`, ça réinitialisera le compte à rebours déjà programmé. Pour garder le mouvement continu, il faut que tous les comptes à rebours soient déclenchés. | |||
There was a problem hiding this comment.
| Notez que cet effet n’a *pas besoin* de nettoyage. Si vous appelez `clearTimeout` dans la fonction de nettoyage, alors à chaque changement de `value`, ça réinitialisera le compte à rebours déjà programmé. Pour garder le mouvement continu, il faut que tous les comptes à rebours soient déclenchés. | |
| Notez que cet effet n’a *pas besoin* de nettoyage. Si vous appelez `clearTimeout` dans la fonction de nettoyage, alors à chaque changement de `value`, ça réinitialisera le compte à rebours déjà programmé. Pour obtenir un mouvement continu, il faut que tous les comptes à rebours arrivent à leur terme et déclenchent leur mise à jour associée. |
There was a problem hiding this comment.
Salut @linsolas !
Avant toute chose, merci pour tout ce boulot ! C'est super cool de nous filer un coup de main à nouveau ; après, tu as commencé par une page monstre, hein, tu aimes les défis 😉 Et du coup gros taf de revue, forcément.
Comme je m'y attendais, c'est globalement très bien, j'apprécie notamment le soin porté à des éléments typographiques (apostrophes notamment). On sent la fatigue s'installer vers la fin, avec davantage de mot-à-mot qui donne des VF ampoulées que j'ai dû davantage reformuler que plus tôt dans le texte.
Attention à "Effet" : c'est capitalisé pour une bonne raison, comme Hook. cf. la page "Synchroniser grâce aux Effets", qui précise bien le distingo. Je n'ai pas corrigé partout, mais je te laisse faire une repasse là-dessus. Idem pour Événement d’Effet (corrigé partout).
Vu que tu m'as déjà soumis une 2e PR, ce serait top si tu pouvais faire un commit d'ajustement qui reprendrait les points pertinents issus de mon feedback ici, comme ça je n'aurais pas à les doubler. Tu me fais un coucou après en commentaire sur la PR en question, et j'attaquerai sa revue à ce moment-là.
Bravo en tout cas pour ce méga taf, globalement très quali ! 👏
Avant de traiter les retours, lis bien TOUT ce message, notamment les consignes d'intégration optimale des retours par lot(s)
Tout est fait sous forme de Suggestions GitHub, il te suffit à chaque suggestion que tu approuves de
cliquer le bouton d'ajout au lot de modifs à committer (pas de commit direct !), et sur la fin de créer le commit groupé. (ce mode de regroupement en un seul commit est à favoriser absolument, mais tu devras aller dans l'onglet Files changed pour y accéder, il n'est pas utilisable dans l’onglet Conversation)
Si certaines appellent discussion, n'hésite pas, tu réponds, on en parle, on avance ensemble 🤝
Quand tout sera bouclé côté code, je ferai une repasse visuelle finale en local avant de fusionner. J'y recalerai si besoin les usual suspects : espaces insécables avant les ponctuations doubles, et apostrophes françaises.
Encore mille mercis, j'ai hâte de voir cette PR finalisée et dans main !
tdd
added
Reviewed
and removed
Reviewing
|
Merci beaucoup pour ta lecture attentive @tdd ! Je regarde normalement ça ce soir, et je repasserai sur l'autre PR ensuite. |
|
Merci beaucoup @tdd pour ta relecture. |
tdd
force-pushed
the
reusing-logic-with-custom-hooks
branch
from
40c31c0
to
a64fbd0
Compare
Traduction de la page Reusing logic with custom hooks.
Pour le titre de la page, je suis parti sur
Réutilisation de la logique avec des Hooks personnalisés, mais je pense que je vais plutôt partir surFactoriser la logique avec des Hooks personnaliséscomme indiqué dans le fichierTRANSLATORS.md...