react-docs

React 19.3

Aperçu

Cette compétence contient les règles de React 19.3 souvent mal comprises : des Effets qui ne devraient pas exister, des pièges de dépendances, des Actions et leurs Transitions, les limites des Server Components, l'adoption du React Compiler, et les APIs supprimées ou dépréciées dans la version 19. Chaque affirmation renvoie vers l'URL de sa page.

Version couverte

React 19.3, la version documentée sur react.dev. Les versions majeures précédentes se trouvent sur 18.react.dev et les sites plus anciens. https://react.dev/versions

Lisez le guide de démarrage rapide, puis ouvrez le fichier de référence correspondant à la tâche.

Démarrage rapide

• Utilisez un Effet uniquement pour synchroniser avec un système que React ne contrôle pas. Dérivez les valeurs pendant le rendu, réinitialisez l'état avec une key, et exécutez la logique déclenchée par l'utilisateur dans des gestionnaires d'événements. https://react.dev/learn/you-might-not-need-an-effect
• Les dépendances suivent le code : ne supprimez jamais les avertissements de react-hooks/exhaustive-deps. Pour en supprimer une, déplacez les objets et fonctions à l'intérieur de l'Effet, utilisez une fonction de mise à jour, ou lisez la valeur depuis un Effet Événement. https://react.dev/learn/removing-effect-dependencies

const onConnected = useEffectEvent(() => {
  showNotification('Connecté !', theme);
});
useEffect(() => {
  const connection = createConnection(serverUrl, roomId);
  connection.on('connected', () => { onConnected(); });
  connection.connect();
  return () => connection.disconnect();
}, [roomId]);

https://react.dev/learn/separating-events-from-effects

• Un Effet doit supporter le cycle mise-en-place, nettoyage, mise-en-place : le Mode Strict exécute cela en développement. Corrigez le nettoyage, ne cachez jamais la deuxième exécution avec un garde ref. https://react.dev/learn/synchronizing-with-effects
• ref est une prop des composants fonction. Utilisez <Context value={x}> comme fournisseur. Un callback ref peut retourner son propre nettoyage. https://react.dev/reference/react/useRef et https://react.dev/reference/react/createContext et https://react.dev/reference/react-dom/components/common
• Un état défini après un await à l'intérieur de startTransition n'est pas une Transition : enveloppez-le dans un autre startTransition. https://react.dev/reference/react/useTransition
• Avec <form action>, le réducteur useActionState reçoit (prevState, formData). Appelez dispatchAction depuis une Action : <form action> ou startTransition. https://react.dev/reference/react/useActionState
• useFormStatus lit le <form> parent uniquement : appelez-le dans un composant enfant. https://react.dev/reference/react-dom/hooks/useFormStatus
• use(promise) nécessite une Promise mise en cache : une créée pendant le rendu est recréée à chaque rendu. N'enveloppez jamais use dans try/catch : utilisez une Error Boundary. https://react.dev/reference/react/use
• 'use server' marque les Server Functions, jamais les Server Components, qui n'ont pas de directive. Validez chaque argument de Server Function et vérifiez l'autorisation. https://react.dev/reference/rsc/server-components et https://react.dev/reference/rsc/use-server
• Composant réservé au navigateur : use(browser()), browser depuis react-dom, sous une limite <Suspense>, au lieu de typeof window ou d'un indicateur monté. https://react.dev/reference/react-dom/browser
• Avec le React Compiler, écrivez du code simple et conservez useMemo ou useCallback uniquement pour un contrôle précis, comme une dépendance d'Effet. Laissez les mémorisations existantes en place. https://react.dev/learn/react-compiler/introduction
• Utilisez eslint-plugin-react-hooks avec recommended. Il contient les règles du compilateur, donc retirez eslint-plugin-react-compiler. https://react.dev/blog/2025/10/07/react-compiler-1
• Définissez les composants au niveau du module, jamais à l'intérieur d'un autre composant. https://react.dev/reference/eslint-plugin-react-hooks/lints/static-components
• Ne mettez jamais un chiffre à gauche de && : count && <p/> affiche 0. https://react.dev/learn/conditional-rendering

Fichiers de référence

Fichier	Ouvrez-le pour
references/state.md	useState, fonctions de mise à jour, set pendant le rendu, useReducer, mises à jour immuables, structure de l'état, réinitialisations avec key
references/refs-and-context.md	useRef, callbacks ref, ref en tant que prop, useImperativeHandle, contexte, useId, useSyncExternalStore
references/effects.md	Quand ne pas utiliser un Effet, timing de useEffect, nettoyage en Mode Strict, chargement de données, useLayoutEffect, useInsertionEffect
references/effect-dependencies.md	Supprimer des dépendances, useEffectEvent, Hooks personnalisés, additionalEffectHooks
references/memoization.md	useMemo, useCallback, memo, avec et sans le compilateur
references/react-compiler.md	Installation, options, directives, adoption incrémentale, débogage du compilateur
references/rules-and-lints.md	Règles de React, Règles des Hooks, règles de eslint-plugin-react-hooks, Mode Strict
references/components-and-tooling.md	Clés, rendu conditionnel, refs de Fragment, Profiler, act, TypeScript, DevTools
references/transitions-and-suspense.md	useTransition, startTransition, useDeferredValue, use, lazy, <Suspense>
references/view-transitions-and-activity.md	<ViewTransition>, addTransitionType, <Activity>
references/actions-and-optimistic.md	useActionState, useOptimistic, useFormStatus, <form action>
references/form-elements-and-events.md	Entrées contrôlées, <select>, <textarea>, props communes, événements, éléments personnalisés
references/server-components.md	Server Components, 'use client', props sérialisables, cache, cacheSignal, taint
references/server-functions.md	'use server', appeler des Server Functions, permalien, sécurité
references/client-roots-and-hydration.md	createRoot, hydrateRoot, inégalités, signalement d'erreurs, Error Boundaries
references/server-rendering.md	renderToPipeableStream, renderToReadableStream, codes de statut, prerender, resume
references/dom-apis-and-resources.md	browser, createPortal, flushSync, preload, preinit, <img>, <link>, <script>, <title>
references/upgrading-to-19.md	Étapes de mise à niveau, codemods, APIs supprimées et dépréciées, modifications TypeScript, 19.2 et 19.3
references/legacy-apis.md	Children, cloneElement, composants classe, forwardRef, PureComponent

Anciens motifs

Ancienne utilisation	Remplacement	Source
forwardRef((props, ref) => ...)	function MyInput({ ref, ...props })	https://react.dev/reference/react/forwardRef
<Context.Provider value={x}>	<Context value={x}>	https://react.dev/reference/react/createContext
Prop de rendu <Context.Consumer>	useContext(Context) ou use(Context)	https://react.dev/reference/react/createContext
ReactDOM.useFormState	useActionState depuis react	https://react.dev/blog/2024/12/05/react-19
ReactDOM.render, ReactDOM.hydrate	createRoot(el).render(), hydrateRoot	https://react.dev/reference/react-dom
unmountComponentAtNode	root.unmount()	https://react.dev/reference/react-dom
findDOMNode	Références DOM	https://react.dev/blog/2024/04/25/react-19-upgrade-guide
Références chaînes, this.refs	Callbacks ref ou createRef	https://react.dev/blog/2024/04/25/react-19-upgrade-guide
contextTypes, getChildContext	createContext, static contextType	https://react.dev/blog/2024/04/25/react-19-upgrade-guide
element.ref	element.props.ref	https://react.dev/blog/2024/04/25/react-19-upgrade-guide
react-test-renderer, rendu superficiel	Testing Library	https://react.dev/blog/2024/04/25/react-19-upgrade-guide
Espace de noms global JSX dans les types	declare module "react" { namespace JSX {} }	https://react.dev/blog/2024/04/25/react-19-upgrade-guide
Balise de script pour le build UMD	ESM CDN comme esm.sh	https://react.dev/blog/2024/04/25/react-19-upgrade-guide
propTypes	TypeScript	https://react.dev/blog/2024/04/25/react-19-upgrade-guide
defaultProps sur un composant fonction	Paramètres par défaut ES	https://react.dev/blog/2024/04/25/react-19-upgrade-guide
import { act } from 'react-dom/test-utils'	import { act } from 'react'	https://react.dev/blog/2024/04/25/react-19-upgrade-guide
act(() => ...) synchrone	await act(async () => ...)	https://react.dev/reference/react/act
Callback ref utilisant un appel null	Retourner une fonction de nettoyage	https://react.dev/reference/react-dom/components/common
renderToString pour SSR	renderToPipeableStream ou renderToReadableStream	https://react.dev/reference/react-dom/server/renderToString
renderToNodeStream, renderToStaticNodeStream	APIs de streaming de react-dom/server	https://react.dev/reference/react-dom
Lever une exception sur le serveur pour ignorer SSR	use(browser())	https://react.dev/reference/react/Suspense
État isClient défini dans un Effet, typeof window dans le rendu	use(browser()) sous <Suspense>	https://react.dev/reference/react-dom/browser
eslint-plugin-react-compiler	eslint-plugin-react-hooks	https://react.dev/blog/2025/10/07/react-compiler-1
"use no forget"	"use no memo"	https://react.dev/reference/react-compiler/directives/use-no-memo
react({ babel: { plugins: [...] } }) sur @vitejs/plugin-react 6	reactCompilerPreset avec @rolldown/plugin-babel	https://react.dev/learn/react-compiler/installation
componentWillMount, componentWillReceiveProps, componentWillUpdate	Noms UNSAFE_, ou les alternatives de la page	https://react.dev/reference/react/Component