Skip to content

Commit 473eea3

Browse files
committed
copy(StrictMode): final review pass
1 parent 53e36bc commit 473eea3

File tree

2 files changed

+11
-10
lines changed

2 files changed

+11
-10
lines changed

TRANSLATORS.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -206,6 +206,7 @@ Voici la liste par ordre alphabétique (prénom, nom). **🙏🏻 Mille mercis
206206
<li><a href=https://fr.react.dev/learn/reusing-logic-with-custom-hooks">Réutiliser de la logique grâce aux Hooks personnalisés</a></li>
207207
<li><a href=https://fr.react.dev/reference/react/useContext"><code>useContext</code></a></li>
208208
<li><a href=https://fr.react.dev/reference/react/useReducer"><code>useReducer</code></a></li>
209+
<li><a href=https://fr.react.dev/reference/react/StrictMode"><code>&lt;StrictMode&gt;</code></a></li>
209210
</ul>
210211
</td>
211212
</tr>

src/content/reference/react/StrictMode.md

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ title: <StrictMode>
55

66
<Intro>
77

8-
`<StrictMode>` vous permet de détecter des bugs courants dans vos composants pendant le développement.
8+
`<StrictMode>` vous permet de détecter des bugs courants dans vos composants pendant la phase de développement.
99

1010

1111
```js
@@ -89,7 +89,7 @@ Le mode strict active les vérifications suivantes en mode de développement :
8989
- Vos composants [exécuteront les Effets une fois supplémentaire](#fixing-bugs-found-by-re-running-effects-in-development) afin de détecter les bugs causés par l'absence de nettoyage d'Effet.
9090
- Vos composants [seront contrôlés pour l'utilisation d'API dépréciées](#fixing-deprecation-warnings-enabled-by-strict-mode).
9191

92-
**Ces vérifications ne fonctionnent qu'en phase de développement et n'ont aucun impact sur le *build* de production.**
92+
**Ces vérifications ne sont effectuées qu'en phase de développement et n'ont aucun impact sur votre *build* de production.**
9393

9494
</Note>
9595

@@ -134,7 +134,7 @@ Les composants qui ne respectent pas cette règle peuvent se comporter de façon
134134

135135
Si une fonction est pure, l'exécuter deux fois ne change pas son comportement, car une telle fonction produit le même résultat à chaque fois. Cependant, si une fonction est impure (elle modifie par exemple la donnée qu'elle reçoit), l'exécuter deux fois devrait se remarquer (c'est ce qui la rend impure !). Ça vous aide à détecter et corriger les bugs plus rapidement.
136136

137-
**Voici un exemple pour illustrer comment le double rendu en mode strict vous aide à trouver des bugs plus rapidement.**
137+
**Voici un exemple qui illustre comment le double rendu en mode strict vous aide à détecter des bugs plus tôt.**
138138

139139
Ce composant `StoryTray` prend un tableau de `stories` et ajoute à la fin un élément « Créer une histoire » :
140140

@@ -212,9 +212,9 @@ li {
212212

213213
</Sandpack>
214214

215-
Il y a une erreur dans le code ci-dessus. Il est cependant facile de passer à côté car l'affichage initial semble correct.
215+
Il y a une erreur dans le code ci-dessus. Il est cependant facile de passer à côté, dans la mesure où l'affichage initial semble correct.
216216

217-
Cette erreur devient bien plus notable si le composant `StoryTray` fait son rendu plusieurs fois. Par exemple, faisons un nouveau rendu de `StoryTray` avec une couleur de fond différente à chaque fois que vous le survolez :
217+
Cette erreur devient bien plus facile à remarquer lorsque le composant `StoryTray` fait son rendu plusieurs fois. Par exemple, faisons un nouveau rendu de `StoryTray` avec une couleur de fond différente à chaque fois que vous le survolez :
218218

219219
<Sandpack>
220220

@@ -310,9 +310,9 @@ export default function StoryTray({ stories }) {
310310
items.push({ id: 'create', label: 'Créer une histoire' });
311311
```
312312
313-
Ça rendrait [la fonction `StoryTray` pure](/learn/keeping-components-pure). À chaque appel, elle ne modifierait que la copie du tableau et n'affecterait aucun objet ou variable externe. Ça résout le bug, mais vous avez dû faire en sorte que le composant fasse plus souvent son rendu avant qu'il ne devienne évident que son comportement n'était pas correct.
313+
Ça rendrait [la fonction `StoryTray` pure](/learn/keeping-components-pure). À chaque appel, elle ne modifierait que la copie du tableau et n'affecterait aucun objet ou variable externe. Ça résout le bug, mais vous avez dû faire en sorte que le composant fasse plus souvent son rendu pour mettre en évidence le souci dans son comportement.
314314
315-
**Dans cet exemple, le bug n'était pas évident. Enrobons maintenant le code original (et buggué) dans un `<StrictMode>` :**
315+
**Dans cet exemple, le bug ne sautait pas aux yeux. Enrobons maintenant le code original (avec son bug) dans un composant `<StrictMode>` :**
316316
317317
<Sandpack>
318318
@@ -393,7 +393,7 @@ li {
393393
394394
</Sandpack>
395395
396-
**Le mode strict appelle *toujours* votre fonction de rendu deux fois, afin que vous puissiez voir le problème immédiatement** (« Créer une histoire » apparaît deux fois). Ça vous permet de détecter ce genre d'erreur plus tôt dans le processus. Lorsque vous corrigez votre composant pour qu'il fasse des rendus corrects en mode strict, vous corrigez *également* de nombreux bugs potentiels en production, telle que la fonctionnalité de survol précédente :
396+
**Le mode strict appelle *toujours* votre fonction de rendu deux fois, afin que vous puissiez voir le problème immédiatement** (« Créer une histoire » apparaît deux fois). Ça vous permet de détecter ce genre d'erreur plus tôt dans le processus de développement. Lorsque vous corrigez votre composant pour qu'il fasse des rendus corrects en mode strict, vous corrigez *également* de nombreux bugs potentiels en production, telle que la fonctionnalité de survol précédente :
397397
398398
<Sandpack>
399399
@@ -658,7 +658,7 @@ Vous remarquerez que le nombre de connexions ouvertes ne cesse de grandir. Dans
658658
659659
Maintenant que votre Effet « fait le nettoyage » et supprime les connexions obsolètes, la fuite est réparée. Remarquez cependant que le problème n'est devenu visible qu'une fois de nouvelles fonctionnalités ajoutées (la liste déroulante).
660660
661-
**Dans l'exemple original, le bug n'était pas évident. Enrobez maintenant le code original (et buggué) dans un `<StrictMode>` :**
661+
**Dans l'exemple original, le bug ne sautait pas aux yeux. Enrobez maintenant le code original (et buggué) dans un composant `<StrictMode>` :**
662662
663663
<Sandpack>
664664
@@ -823,7 +823,7 @@ Sans le mode strict, il était facile de passer à côté du fait que l'Effet n
823823
React alerte si certains composants quelque part à l'intérieur de l'arbre de `<StrictMode>` utilisent l'une de ces API dépréciées :
824824
825825
* [`findDOMNode`](/reference/react-dom/findDOMNode). [Voir les alternatives](/reference/react-dom/findDOMNode#alternatives).
826-
* Les méthodes de cycle de vie `UNSAFE_` des classes telle que [`UNSAFE_componentWillMount`](/reference/react/Component#unsafe_componentwillmount). [Voir les alternatives](https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#migrating-from-legacy-lifecycles).
826+
* Les méthodes de cycle de vie `UNSAFE_` des composants à base de classes, telles que [`UNSAFE_componentWillMount`](/reference/react/Component#unsafe_componentwillmount). [Voir les alternatives](https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#migrating-from-legacy-lifecycles).
827827
* Les anciens contextes ([`childContextTypes`](/reference/react/Component#static-childcontexttypes), [`contextTypes`](/reference/react/Component#static-contexttypes) et [`getChildContext`](/reference/react/Component#getchildcontext)). [Voir les alternatives](/reference/react/createContext).
828828
* Les anciennes refs textuelles ([`this.refs`](/reference/react/Component#refs)). [Voir les alternatives](https://legacy.reactjs.org/docs/strict-mode.html#warning-about-legacy-string-ref-api-usage).
829829

0 commit comments

Comments
 (0)