Translation: Lifecycle of Reactive Effects page #491
Conversation
Size changes📦 Next.js Bundle Analysis for react-devThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
tdd
added
Pending Review
tdd
changed the title
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.
Cette page était énorme, ce qui fait qu'avec mon mois de juin surbooké la review s'est étalée dans le temps, mais la voici enfin !
Outre les refactos courantes, pas mal de tweaks sur le mix masculin/féminin pour parler de variables/valeurs/URL qui sont toujours au féminin, du coup, vu leur nature. Donc "réactive", etc.
Également un point fréquent sur "monter" et "démonter", qui sont des actions réalisées par le parent du composant, pas le composant lui-même (il "est monté", il ne "se monte" pas).
Mille mercis en tout cas pour tout ce boulot !
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 !
|
|
||
| This is why it makes sense to describe them as two separate Effects. Here's an example of how you could do this: | ||
| C'est pourquoi c'est logique de les décrire comme deux Effets distincts. Voici un exemple de ce que vous pouvez faire : |
There was a problem hiding this comment.
| C'est pourquoi c'est logique de les décrire comme deux Effets distincts. Voici un exemple de ce que vous pouvez faire : | |
| C'est pourquoi il est logique de les décrire comme deux Effets distincts. Voici un exemple de ce que vous pouvez faire : |
| @@ -1797,9 +1798,9 @@ export default function Page() { | |||
| let ignore = false; | |||
| fetchData('/planets').then(result => { | |||
| if (!ignore) { | |||
| console.log('Fetched a list of planets.'); | |||
| console.log("Récupération d'une liste de planètes."); | |||
There was a problem hiding this comment.
| console.log("Récupération d'une liste de planètes."); | |
| console.log("Récupération d’une liste de planètes."); |
| @@ -1809,16 +1810,16 @@ export default function Page() { | |||
|
|
|||
| useEffect(() => { | |||
| if (planetId === '') { | |||
| // Nothing is selected in the first box yet | |||
| // Rien n'est choisi dans la première liste | |||
There was a problem hiding this comment.
| // Rien n'est choisi dans la première liste | |
| // Rien n’est choisi dans la première liste |
| @@ -1939,9 +1940,9 @@ label { display: block; margin-bottom: 10px; } | |||
|
|
|||
| </Sandpack> | |||
|
|
|||
| This code is a bit repetitive. However, that's not a good reason to combine it into a single Effect! If you did this, you'd have to combine both Effect's dependencies into one list, and then changing the planet would refetch the list of all planets. Effects are not a tool for code reuse. | |||
| Ce code est un tantinet répétitif. Cependant, ce n'est pas une bonne raison pour tout mettre dans un seul Effet ! Si vous faisiez ça, vous devriez combiner les dépendances des deux Effets dans une seule liste, et le changement de la planète entraînerait la récupération de toutes les planètes. Les Effets ne sont pas un outil pour la réutilisation de code. | |||
There was a problem hiding this comment.
| Ce code est un tantinet répétitif. Cependant, ce n'est pas une bonne raison pour tout mettre dans un seul Effet ! Si vous faisiez ça, vous devriez combiner les dépendances des deux Effets dans une seule liste, et le changement de la planète entraînerait la récupération de toutes les planètes. Les Effets ne sont pas un outil pour la réutilisation de code. | |
| Ce code est un tantinet répétitif. Cependant, ce n'est pas une raison pour tout mettre dans un seul Effet ! Si vous faisiez ça, vous devriez combiner les dépendances des deux Effets dans une seule liste, et le changement de la planète entraînerait la récupération de toutes les planètes. Les Effets ne servent pas à réutiliser du code. |
| @@ -2102,7 +2103,7 @@ label { display: block; margin-bottom: 10px; } | |||
|
|
|||
| </Sandpack> | |||
|
|
|||
| Check the `useSelectOptions.js` tab in the sandbox to see how it works. Ideally, most Effects in your application should eventually be replaced by custom Hooks, whether written by you or by the community. Custom Hooks hide the synchronization logic, so the calling component doesn't know about the Effect. As you keep working on your app, you'll develop a palette of Hooks to choose from, and eventually you won't need to write Effects in your components very often. | |||
| Regardez l'onglet `useSelectOptions.js` dans le bac à sable pour voir son fonctionnement. Dans l'idéal, la plupart des Effets de votre application devraient être remplacés par des Hooks personnalisés, qu'ils soient écrits par vous ou par la communauté. Les Hooks personnalisés cachent la logique de synchronisation, de sorte que le composant appelant ne sait rien de l'Effet. Au fur et à mesure que vous travaillerez sur votre appli, vous développerez une palette de Hooks parmi lesquels vous pourrez choisir, et finalement vous n'aurez plus besoin d'écrire des Effets dans vos composants très souvent. | |||
There was a problem hiding this comment.
| Regardez l'onglet `useSelectOptions.js` dans le bac à sable pour voir son fonctionnement. Dans l'idéal, la plupart des Effets de votre application devraient être remplacés par des Hooks personnalisés, qu'ils soient écrits par vous ou par la communauté. Les Hooks personnalisés cachent la logique de synchronisation, de sorte que le composant appelant ne sait rien de l'Effet. Au fur et à mesure que vous travaillerez sur votre appli, vous développerez une palette de Hooks parmi lesquels vous pourrez choisir, et finalement vous n'aurez plus besoin d'écrire des Effets dans vos composants très souvent. | |
| Regardez l'onglet `useSelectOptions.js` dans le bac à sable pour voir son fonctionnement. Dans l'idéal, la plupart des Effets de votre application devraient au final être remplacés par des Hooks personnalisés, qu'ils soient écrits par vous ou par la communauté. Les Hooks personnalisés cachent la logique de synchronisation, de sorte que le composant appelant ne sait rien de l'Effet. Au fur et à mesure que vous travaillerez sur votre appli, vous développerez une palette de Hooks parmi lesquels choisir, et finalement vous n'aurez plus que rarement besoin d'écrire des Effets dans vos composants. |
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.
Cette page était énorme, ce qui fait qu'avec mon mois de juin surbooké la review s'est étalée dans le temps, mais la voici enfin !
Outre les refactos courantes, pas mal de tweaks sur le mix masculin/féminin pour parler de variables/valeurs/URL qui sont toujours au féminin, du coup, vu leur nature. Donc "réactive", etc.
Également un point fréquent sur "monter" et "démonter", qui sont des actions réalisées par le parent du composant, pas le composant lui-même (il "est monté", il ne "se monte" pas).
Mille mercis en tout cas pour tout ce boulot !
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
Co-authored-by: Christophe Porteneuve <tdd@tddsworld.com>
Bonsoir @tdd,
Ma nouvelle PR, pour la traduction de Lifecycle of Reactive Effects.