Update 2018-10-23-react-v-16-6.md

content/blog/2018-10-23-react-v-16-6.md

@@ -1,59 +1,59 @@
 ---
-title: "React v16.6.0: lazy, memo and contextType"
+title: "React v16.6.0 : lazy, memo et contextType"
 author: [sebmarkbage]
 ---
 
-Today we're releasing React 16.6 with a few new convenient features. A form of PureComponent/shouldComponentUpdate for function components, a way to do code splitting using Suspense and an easier way to consume Context from class components.
+Nous publions aujourd'hui React 16.6 avec quelques nouvelles fonctionnalités pratiques. Une forme de `PureComponent` / `shouldComponentUpdate` pour les fonctions composants, un moyen de découper le code à l'aide de Suspense et un moyen plus simple d'utiliser `Context` à partir des composants à base de classes.
 
-Check out the full [changelog](#changelog) below.
+Découvrez le [changelog](#changelog) complet plus bas.
 
 ## [`React.memo`](/docs/react-api.html#reactmemo) {#reactmemo}
 
-Class components can bail out from rendering when their input props are the same using [`PureComponent`](/docs/react-api.html#reactpurecomponent) or [`shouldComponentUpdate`](/docs/react-component.html#shouldcomponentupdate). Now you can do the same with function components by wrapping them in [`React.memo`](/docs/react-api.html#reactmemo).
+Les composants à base de classes peuvent éviter le rendu lorsque les valeurs de leurs props sont les mêmes en utilisant [`PureComponent`](/docs/react-api.html#reactpurecomponent) ou [`shouldComponentUpdate`](/docs/react-component.html#shouldcomponentupdate). Désormais, vous pouvez faire la même chose avec les fonctions composants en les enrobant avec [`React.memo`](/docs/react-api.html#reactmemo).
 
 ```js
 const MyComponent = React.memo(function MyComponent(props) {
-  /* only rerenders if props change */
+  /* le rendu ne se fait que lorsque les props changent */
 });
 ```
 
-## [`React.lazy`](/docs/code-splitting.html#reactlazy): Code-Splitting with `Suspense` {#reactlazy-code-splitting-with-suspense}
+## [`React.lazy`](/docs/code-splitting.html#reactlazy) : la découpe de code avec `Suspense` {#reactlazy-code-splitting-with-suspense}
 
-You may have seen [Dan's talk about React Suspense at JSConf Iceland](/blog/2018/03/01/sneak-peek-beyond-react-16.html). Now you can use the Suspense component to do [code-splitting](/docs/code-splitting.html#reactlazy) by wrapping a dynamic import in a call to `React.lazy()`.
+Vous avez peut-être vu [la présentation de Dan sur React Suspense à JSConf Iceland](/blog/2018/03/01/sneak-peek-beyond-react-16.html). Vous pouvez maintenant utiliser le composant Suspense pour faire de la [découpe de code](/docs/code-splitting.html#reactlazy) en enrobant une importation dynamique avec un appel à `React.lazy()`.
 
 ```js
 import React, {lazy, Suspense} from 'react';
 const OtherComponent = lazy(() => import('./OtherComponent'));
 
 function MyComponent() {
   return (
-    <Suspense fallback={<div>Loading...</div>}>
+    <Suspense fallback={<div>Chargement…</div>}>
       <OtherComponent />
     </Suspense>
   );
 }
 ```
 
-The Suspense component will also allow library authors to start building data fetching with Suspense support in the future.
+Le composant Suspense permettra également aux auteur·e·s de bibliothèques de commencer à construire de la récupération de données prenant en charge Suspense à l'avenir.
 
-> Note: This feature is not yet available for server-side rendering. Suspense support will be added in a later release.
+> Note : cette fonctionnalité n'est pas encore disponible pour le rendu côté serveur. La prise en charge de Suspense sera ajoutée dans une version ultérieure.
 
 ## [`static contextType`](/docs/context.html#classcontexttype) {#static-contexttype}
 
-In [React 16.3](/blog/2018/03/29/react-v-16-3.html) we introduced the official Context API as a replacement to the previous [Legacy Context](/docs/legacy-context.html) API.
+Dans [React 16.3](/blog/2018/03/29/react-v-16-3.html) nous avons introduit l’API de Contexte en remplacement de la précédente API [Legacy Context](/docs/legacy-context.html).
 
 ```js
 const MyContext = React.createContext();
 ```
 
-We've heard feedback that adopting the new render prop API can be difficult in class components. So we've added a convenience API to [consume a context value from within a class component](/docs/context.html#classcontexttype).
+Nous avons reçu des commentaires selon lesquels l’adoption de la nouvelle API à base de props de rendu peut s’avérer difficile dans les composants à base de classes. Nous avons donc ajouté une API de confort pour [consommer une valeur de contexte depuis un composant à base de classe](/docs/context.html#classcontexttype).
 
 ```js
 class MyClass extends React.Component {
   static contextType = MyContext;
   componentDidMount() {
     let value = this.context;
-    /* perform a side-effect at mount using the value of MyContext */
+    /* réaliser un effet secondaire lors du montage en utilisant la valeur de MyContext */
   }
   componentDidUpdate() {
     let value = this.context;
@@ -65,88 +65,88 @@ class MyClass extends React.Component {
   }
   render() {
     let value = this.context;
-    /* render something based on the value of MyContext */
+    /* afficher quelque chose basé sur la valeur de MyContext */
   }
 }
 ```
 
 ## [`static getDerivedStateFromError()`](/docs/react-component.html#static-getderivedstatefromerror) {#static-getderivedstatefromerror}
 
-React 16 introduced [Error Boundaries](/blog/2017/07/26/error-handling-in-react-16.html) for handling errors thrown in React renders. We already had the `componentDidCatch` lifecycle method which gets fired after an error has already happened. It's great for logging errors to the server. It also lets you show a different UI to the user by calling `setState`.
+React 16 a introduit les [Périmètres d’erreurs](/blog/2017/07/26/error-handling-in-react-16.html) pour gérer les erreurs lancées au sein des rendus React. Nous avions déjà la méthode de cycle de vie `componentDidCatch` qui est déclenchée après une erreur. C'est formidable pour la journalisation des erreurs sur le serveur. Ça vous permet également d'afficher une interface utilisateur différente pour l'utilisateur en appelant `setState`.
 
-Before that is fired, we render `null` in place of the tree that threw an error. This sometimes breaks parent components that don't expect their refs to be empty. It also doesn't work to recover from errors on the server since the `Did` lifecycle methods don't fire during server-side rendering.
+Avant de la déclencher, nous faisons le rendu de `null` à la place de l'arbre qui a généré une erreur. Ça casse parfois les composants parents qui ne s’attendent pas à ce que leurs refs soient vides. La récupération des erreurs sur le serveur ne fonctionne pas non plus, puisque les méthodes du cycle de vie `Did` ne sont pas déclenchées lors du rendu côté serveur.
 
-We're adding another error method that lets you render the fallback UI before the render completes. See the docs for [`getDerivedStateFromError()`](/docs/react-component.html#static-getderivedstatefromerror).
+Nous ajoutons une autre méthode d'erreur qui vous permet de produire une interface utilisateur de secours avant la fin du rendu. Consultez la documentation de [`getDerivedStateFromError()`](/docs/react-component.html#static-getderivedstatefromerror).
 
-> Note: `getDerivedStateFromError()` is not yet available for server-side rendering. It is designed to work with server-side rendering in a future release. We're releasing it early so that you can start preparing to use it.
+> Note : `getDerivedStateFromError()` n'est pas encore disponible pour le rendu côté serveur. Elle est conçue pour fonctionner avec le rendu côté serveur dans une version ultérieure. Nous la publions tôt pour que vous puissiez commencer à vous préparer à l'utiliser.
 
-## Deprecations in StrictMode {#deprecations-in-strictmode}
+## Dépréciations en StrictMode {#deprecations-in-strictmode}
 
-In [16.3](/blog/2018/03/29/react-v-16-3.html#strictmode-component) we introduced the [`StrictMode`](/docs/strict-mode.html) component. It lets you opt-in to early warnings for patterns that might cause problems in the future.
+La version [16.3](/blog/2018/03/29/react-v-16-3.html#strictmode-component) a introduit le composant [`StrictMode`](/docs/strict-mode.html). Il vous permet d'activer des alertes précoces pour les approches susceptibles de poser problème à l'avenir.
 
-We've added two more APIs to the list of deprecated APIs in `StrictMode`. If you don't use `StrictMode` you don't have to worry; these warning won't fire for you.
+Nous avons ajouté deux API supplémentaires à la liste des API obsolètes en `StrictMode`. Si vous n'utilisez pas `StrictMode` vous n'avez pas à vous inquiéter ; ces avertissements ne se déclencheront pas pour vous.
 
-* __ReactDOM.findDOMNode()__ - This API is often misunderstood and most uses of it are unnecessary. It can also be surprisingly slow in React 16. [See the docs](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage) for possible upgrade paths.
-* __Legacy Context__ using contextTypes and getChildContext - Legacy context makes React slightly slower and bigger than it needs to be. That's why we strongly want to encourage upgrading to the [new context API](/docs/context.html). Hopefully the addition of the [`contextType`](/docs/context.html#classcontexttype) API makes this a bit easier.
+* __ReactDOM.findDOMNode()__ - Cette API est souvent mal comprise et la plupart des utilisations de celle-ci sont inutiles. Elle peut aussi être étonnamment lente dans React 16. [Consultez les docs](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage) pour les mécanismes de mise à niveau possibles.
+* __Legacy Context__ en utilisant contextTypes et getChildContext - Le Legacy Context rend React légèrement plus lent et plus gros que nécessaire. C’est pourquoi nous souhaitons vivement encourager la mise à niveau vers la [nouvelle API de Contexte](/docs/context.html). Espérons que l’ajout de l’API [`contextType`](/docs/context.html#classcontexttype) rendra ça un peu plus facile.
 
-If you're having trouble upgrading, we'd like to hear your feedback.
+Si vous rencontrez des difficultés pour effectuer la mise à niveau, nous aimerions connaître votre avis.
 
 ## Installation {#installation}
 
-React v16.6.0 is available on the npm registry.
+React v16.6.0 est disponible sur npm.
 
-To install React 16 with Yarn, run:
+Pour installer React 16 avec Yarn, exécutez :
 
 ```bash
 yarn add react@^16.6.0 react-dom@^16.6.0
 ```
 
-To install React 16 with npm, run:
+Pour installer React 16 avec npm, exécutez :
 
 ```bash
 npm install --save react@^16.6.0 react-dom@^16.6.0
 ```
 
-We also provide UMD builds of React via a CDN:
+Nous fournissons également des versions UMD de React via un CDN:
 
 ```html
 <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
 <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
 ```
 
-Refer to the documentation for [detailed installation instructions](/docs/installation.html).
+Reportez-vous à la documentation pour les [instructions d'installation détaillées](/docs/installation.html).
 
 ## Changelog {#changelog}
 
 ### React {#react}
 
-* Add `React.memo()` as an alternative to `PureComponent` for functions. ([@acdlite](https://github.com/acdlite) in [#13748](https://github.com/facebook/react/pull/13748))
-* Add `React.lazy()` for code splitting components. ([@acdlite](https://github.com/acdlite) in [#13885](https://github.com/facebook/react/pull/13885))
-* `React.StrictMode` now warns about legacy context API. ([@bvaughn](https://github.com/bvaughn) in [#13760](https://github.com/facebook/react/pull/13760))
-* `React.StrictMode` now warns about `findDOMNode`. ([@sebmarkbage](https://github.com/sebmarkbage) in [#13841](https://github.com/facebook/react/pull/13841))
-* Rename `unstable_AsyncMode` to `unstable_ConcurrentMode`. ([@trueadm](https://github.com/trueadm) in [#13732](https://github.com/facebook/react/pull/13732))
-* Rename `unstable_Placeholder` to `Suspense`, and `delayMs` to `maxDuration`. ([@gaearon](https://github.com/gaearon) in [#13799](https://github.com/facebook/react/pull/13799) and [@sebmarkbage](https://github.com/sebmarkbage) in [#13922](https://github.com/facebook/react/pull/13922))
+* Ajouter `React.memo()` comme alternative à `PureComponent` pour les fonctions. ([@acdlite](https://github.com/acdlite) dans [#13748](https://github.com/facebook/react/pull/13748))
+* Ajouter `React.lazy()` pour la découpe de code les composants. ([@acdlite](https://github.com/acdlite) dans [#13885](https://github.com/facebook/react/pull/13885))
+* `React.StrictMode` avertit désormais du recours à l’API Legacy Context ([@bvaughn](https://github.com/bvaughn) dans [#13760](https://github.com/facebook/react/pull/13760))
+* `React.StrictMode` avertit désormais du recours à `findDOMNode`. ([@sebmarkbage](https://github.com/sebmarkbage) dans [#13841](https://github.com/facebook/react/pull/13841))
+* Renommer `unstable_AsyncMode` en `unstable_ConcurrentMode`. ([@trueadm](https://github.com/trueadm) dans [#13732](https://github.com/facebook/react/pull/13732))
+* Renommer `unstable_Placeholder` en `Suspense`, et `delayMs` en `maxDuration`. ([@gaearon](https://github.com/gaearon) dans [#13799](https://github.com/facebook/react/pull/13799) et [@sebmarkbage](https://github.com/sebmarkbage) dans [#13922](https://github.com/facebook/react/pull/13922))
 
 ### React DOM {#react-dom}
 
-* Add `contextType` as a more ergonomic way to subscribe to context from a class. ([@bvaughn](https://github.com/bvaughn) in [#13728](https://github.com/facebook/react/pull/13728))
-* Add `getDerivedStateFromError` lifecycle method for catching errors in a future asynchronous server-side renderer. ([@bvaughn](https://github.com/bvaughn) in [#13746](https://github.com/facebook/react/pull/13746))
-* Warn when `<Context>` is used instead of `<Context.Consumer>`. ([@trueadm](https://github.com/trueadm) in [#13829](https://github.com/facebook/react/pull/13829))
-* Fix gray overlay on iOS Safari. ([@philipp-spiess](https://github.com/philipp-spiess) in [#13778](https://github.com/facebook/react/pull/13778))
-* Fix a bug caused by overwriting `window.event` in development. ([@sergei-startsev](https://github.com/sergei-startsev) in [#13697](https://github.com/facebook/react/pull/13697))
+* Ajouter `contextType` comme moyen plus ergonomique de s’abonner au Contexte depuis une classe ([@bvaughn](https://github.com/bvaughn) dans [#13728](https://github.com/facebook/react/pull/13728))
+* Ajouter la méthode de cycle de vie `getDerivedStateFromError` pour détecter les erreurs à l’avenir lors du rendu asynchrone côté serveur. ([@bvaughn](https://github.com/bvaughn) dans [#13746](https://github.com/facebook/react/pull/13746))
+* Avertir quand `<Context>` est utilisé à la place de `<Context.Consumer>`. ([@trueadm](https://github.com/trueadm) dans [#13829](https://github.com/facebook/react/pull/13829))
+* Correction du calque gris sur iOS Safari. ([@philipp-spiess](https://github.com/philipp-spiess) dans [#13778](https://github.com/facebook/react/pull/13778))
+* Corrige un bug causé par un écrasement de `window.event` en développement. ([@sergei-startsev](https://github.com/sergei-startsev) dans [#13697](https://github.com/facebook/react/pull/13697))
 
 ### React DOM Server {#react-dom-server}
 
-* Add support for `React.memo()`. ([@alexmckenley](https://github.com/alexmckenley) in [#13855](https://github.com/facebook/react/pull/13855))
-* Add support for `contextType`. ([@alexmckenley](https://github.com/alexmckenley) and [@sebmarkbage](https://github.com/sebmarkbage) in [#13889](https://github.com/facebook/react/pull/13889))
+* Ajouter la prise en charge de `React.memo()`. ([@alexmckenley](https://github.com/alexmckenley) dans [#13855](https://github.com/facebook/react/pull/13855))
+* Ajouter la prise en charge de `contextType`. ([@alexmckenley](https://github.com/alexmckenley) et [@sebmarkbage](https://github.com/sebmarkbage) dans [#13889](https://github.com/facebook/react/pull/13889))
 
-### Scheduler (Experimental) {#scheduler-experimental}
+### Planificateur (expérimental) {#scheduler-experimental}
 
-* Rename the package to `scheduler`. ([@gaearon](https://github.com/gaearon) in [#13683](https://github.com/facebook/react/pull/13683))
-* Support priority levels, continuations, and wrapped callbacks. ([@acdlite](https://github.com/acdlite) in [#13720](https://github.com/facebook/react/pull/13720) and [#13842](https://github.com/facebook/react/pull/13842))
-* Improve the fallback mechanism in non-DOM environments. ([@acdlite](https://github.com/acdlite) in [#13740](https://github.com/facebook/react/pull/13740))
-* Schedule `requestAnimationFrame` earlier. ([@acdlite](https://github.com/acdlite) in [#13785](https://github.com/facebook/react/pull/13785))
-* Fix the DOM detection to be more thorough. ([@trueadm](https://github.com/trueadm) in [#13731](https://github.com/facebook/react/pull/13731))
-* Fix bugs with interaction tracing. ([@bvaughn](https://github.com/bvaughn) in [#13590](https://github.com/facebook/react/pull/13590))
-* Add the `envify` transform to the package. ([@mridgway](https://github.com/mridgway) in [#13766](https://github.com/facebook/react/pull/13766))
+* Renommer le module en `scheduler`. ([@gaearon](https://github.com/gaearon) dans [#13683](https://github.com/facebook/react/pull/13683))
+* Prise en charge des niveaux de priorité, des continuations et des rappels encapsulés. ([@acdlite](https://github.com/acdlite) dans [#13720](https://github.com/facebook/react/pull/13720) et [#13842](https://github.com/facebook/react/pull/13842))
+* Améliorer le mécanisme de secours dans les environnements non-DOM. ([@acdlite](https://github.com/acdlite) dans [#13740](https://github.com/facebook/react/pull/13740))
+* Planifier `requestAnimationFrame` plus tôt. ([@acdlite](https://github.com/acdlite) dans [#13785](https://github.com/facebook/react/pull/13785))
+* Correction de la détection du DOM pour qu'elle soit plus complète. ([@trueadm](https://github.com/trueadm) dans [#13731](https://github.com/facebook/react/pull/13731))
+* Correction de bugs avec le traçage d'interaction. ([@bvaughn](https://github.com/bvaughn) dans [#13590](https://github.com/facebook/react/pull/13590))
+* Ajouter la transformée `envify` au module. ([@mridgway](https://github.com/mridgway) dans [#13766](https://github.com/facebook/react/pull/13766))