Aide-mémoire React
Une référence React 19 imprimable et consultable — composants, JSX, hooks, les nouvelles API Actions, contexte, refs et performance. Gratuit.
Composants et JSX
12function App() { return <h1>Hi</h1>; }
Un composant fonction renvoyant du JSX
export default function App() {}
Exporter un composant par défaut
<Greeting name="Ada" />
Afficher un composant avec des props
{1 + 2} or {user.name}
Intégrer une expression JS avec des accolades
<>{a}{b}</>
Fragment groupe des nœuds, sans DOM supplémentaire
<div className="card">
Utiliser className, pas class, pour le CSS
{isOpen && <Menu />}
Afficher conditionnellement avec &&
{ok ? <Yes /> : <No />}
Choisir entre des nœuds avec un ternaire
{items.map(i => <li key={i.id}>{i.t}</li>)}
Afficher une liste à partir d'un tableau
function Btn({ label, onClick }) {}
Déstructurer les props dans la signature
function Card({ children }) { return children; }
Lire le JSX imbriqué via la prop children
<input value={v} onChange={onChange} />
Champ contrôlé lié à l'état
Rendu et configuration
10import { createRoot } from 'react-dom/client'
Importer l'API root côté client
createRoot(document.getElementById('root')).render(<App/>)
Monter l'application dans le DOM
import { StrictMode } from 'react'
Importer le wrapper StrictMode
<StrictMode><App /></StrictMode>
Faire ressortir les bugs en développement
import { hydrateRoot } from 'react-dom/client'
Importer l'API d'hydratation
hydrateRoot(el, <App />)
Attacher React au HTML serveur
root.unmount()
Démonter une racine montée
import App from './App.jsx'
Importer un composant depuis un module
<App {...props} />
Étaler un objet en props
export { Button, Card }
Exporter plusieurs composants nommés
État et effets
12const [count, setCount] = useState(0)
Déclarer une variable d'état
setCount(c => c + 1)
Mettre à jour à partir de la valeur précédente
setUser(u => ({ ...u, name }))
Mettre à jour un état objet de façon immuable
useEffect(() => { run(); }, [dep])
Exécuter un effet quand les dépendances changent
useEffect(() => { /* once */ }, [])
Exécuter un effet uniquement au montage
useEffect(() => () => cleanup(), [])
Renvoyer une fonction de nettoyage
const ref = useRef(null)
Conserver une valeur mutable entre les rendus
const [state, dispatch] = useReducer(r, init)
Gérer un état complexe avec un reducer
const theme = useContext(ThemeContext)
Lire la valeur de contexte la plus proche
const memo = useMemo(() => calc(a), [a])
Mémoïser un calcul coûteux
useLayoutEffect(() => {}, [])
Exécuter de façon synchrone après le layout
useSyncExternalStore(sub, get)
S'abonner à un store externe
Hooks et API de React 19
12import { use } from 'react'
Importer la nouvelle API use
const data = use(promise)
Lire une promesse, suspend jusqu'à ce qu'elle soit prête
const theme = use(ThemeContext)
Lire le contexte, autorisé conditionnellement
const [state, action, pending] = useActionState(fn, init)
Suivre l'état, l'action et l'attente
const [opt, addOpt] = useOptimistic(state, reducer)
Afficher une valeur optimiste instantanément
const { pending } = useFormStatus()
Lire le statut de soumission du formulaire parent
const [isPending, startTransition] = useTransition()
Marquer les mises à jour comme non urgentes
startTransition(async () => await save())
Exécuter une Action async dans une transition
const deferred = useDeferredValue(value)
Différer une valeur pour garder l'UI réactive
const id = useId()
Générer un id unique stable
<title>Page title</title>
Afficher des métadonnées n'importe où dans l'arbre
function Input({ ref }) {}
ref est une prop normale, pas de forwardRef
Formulaires et Actions
12<form action={handleSubmit}>
Passer une fonction comme Action de formulaire
function handleSubmit(formData) {}
L'Action reçoit le FormData
formData.get('email')
Lire un champ depuis FormData
const [state, action] = useActionState(submit, null)
Relier une Action à l'état du composant
<form action={action}>
Utiliser l'Action encapsulée sur le formulaire
const [s, a, pending] = useActionState(fn, init)
Exposer un indicateur d'attente pour l'UI
return { error: 'Invalid' }
Renvoyer un état d'erreur depuis une Action
function Submit() { const { pending } = useFormStatus() }
Lire l'état d'attente dans le bouton d'envoi
<button disabled={pending}>Save</button>
Désactiver l'envoi pendant l'attente
import { requestFormReset } from 'react-dom'
Importer l'utilitaire de réinitialisation de formulaire
requestFormReset(formEl)
Réinitialiser un formulaire non contrôlé
<form action={action}><Submit /></form>
Composer un formulaire à Action avec statut
Props et composition
10function Hi({ name = 'Guest' }) {}
Prop par défaut via déstructuration
function Box({ children }) { return children; }
Encapsuler du contenu avec la prop children
<Box><p>Inside</p></Box>
Passer du JSX en children
function List({ render }) { return render(); }
Patron render prop
<List render={() => <Item />} />
Fournir une fonction de rendu
<Input {...props} />
Transférer toutes les props avec le spread
const { id, ...rest } = props
Choisir une prop et passer le reste
<Avatar {...rest} size="lg" />
Étaler puis remplacer une prop
function Btn(props: BtnProps) {}
Typer les props avec des interfaces TypeScript
<Slot label={<b>Hi</b>} />
Passer du JSX via une prop nommée
Événements
10<button onClick={handleClick}>
Attacher un gestionnaire de clic
function handleClick(e) {}
Recevoir l'événement synthétique
<input onChange={e => set(e.target.value)} />
Lire la valeur d'un champ au changement
<form onSubmit={e => e.preventDefault()}>
Empêcher la soumission par défaut du formulaire
e.stopPropagation()
Empêcher l'événement de remonter (bubbling)
<li onClick={() => remove(id)}>
Passer des arguments avec une closure
<input onKeyDown={e => e.key === 'Enter'}
Gérer l'appui sur une touche précise
<div onMouseEnter={hover}>
Écouter les événements de pointeur
e.currentTarget.value
Lire l'élément sur lequel est le gestionnaire
<button onClick={() => {}} type="button">
Éviter la soumission implicite du formulaire
Listes et clés
10arr.map(x => <li key={x.id}>{x.t}</li>)
Afficher un nœud par élément
key={item.id}
Donner une clé stable à chaque élément
key={index}
Clés d'index uniquement pour les listes statiques
users.map(u => <Card key={u.id} {...u} />)
Étaler les champs d'un élément en props
{list.length === 0 && <Empty />}
Afficher un repli pour les listes vides
import { Fragment } from 'react'
Importer Fragment pour les groupes avec clé
<Fragment key={id}>{a}{b}</Fragment>
Un fragment avec clé dans une liste
{rows.filter(r => r.on).map(...)}
Filtrer avant de mapper
Keys must be unique among siblings
Pourquoi les clés aident React à comparer les listes
{[...Array(n)].map((_, i) => ...)}
Mapper une plage de longueur fixe
Contexte
10const ThemeContext = createContext('light')
Créer un contexte avec une valeur par défaut
import { createContext } from 'react'
Importer la fabrique de contexte
<ThemeContext value={theme}>
Fournir une valeur (syntaxe React 19)
<ThemeContext value={theme}><App /></ThemeContext>
Encapsuler l'arbre qui le lit
const theme = useContext(ThemeContext)
Lire le contexte avec useContext
const theme = use(ThemeContext)
Lire le contexte avec l'API use
if (cond) { const t = use(Ctx); }
use peut lire le contexte conditionnellement
export const ThemeContext = createContext()
Exporter un contexte partagé
<Ctx value={{ user, setUser }}>
Passer un objet comme valeur
Avoid new objects each render
Mémoïser les valeurs pour limiter les re-rendus
Refs
10const inputRef = useRef(null)
Créer un porteur de ref
<input ref={inputRef} />
Attacher la ref à un nœud
inputRef.current.focus()
Accéder au nœud DOM via current
function Field({ ref }) { return <input ref={ref} /> }
ref en tant que prop, pas de forwardRef
<Field ref={inputRef} />
Passer une ref à un composant
useImperativeHandle(ref, () => ({ focus }))
Exposer une API impérative
const setRef = node => { box = node; }
Utiliser une ref par callback
<div ref={setRef} />
Attacher une ref par callback
const count = useRef(0)
Stocker une valeur sans déclencher de re-rendu
ref={node => { return () => cleanup(); }}
Ref par callback avec nettoyage (React 19)
Performance
10const Memo = memo(Component)
Éviter le re-rendu quand les props sont égales
import { memo } from 'react'
Importer l'utilitaire memo
const value = useMemo(() => calc(a), [a])
Mettre en cache une valeur calculée
const fn = useCallback(() => f(a), [a])
Mettre en cache l'identité d'une fonction
const Lazy = lazy(() => import('./Big.jsx'))
Découper un composant (code-splitting)
import { lazy, Suspense } from 'react'
Importer lazy et Suspense
<Suspense fallback={<Spin />}><Lazy /></Suspense>
Afficher un repli pendant le chargement
startTransition(() => setQuery(q))
Marquer les mises à jour d'état non urgentes
const slow = useDeferredValue(query)
Différer une UI dérivée coûteuse
React Compiler auto-memoizes
Supprime souvent la mémoïsation manuelle
Divers et métadonnées
10<Suspense fallback={<Loading />}>
Limite pour le contenu asynchrone
class ErrorBoundary extends Component {}
Capturer les erreurs de rendu (classe héritée)
<title>My Page</title>
Remonter le titre du document depuis un composant
<meta name="description" content="..." />
Afficher des balises meta dans le head
<link rel="stylesheet" href="..." />
Remonter un lien de feuille de style
<Comp key={id} />
Changer la clé pour remonter un composant
React.lazy(() => import('./Page.jsx'))
Importer paresseusement un composant de route
createPortal(node, container)
Afficher dans un autre nœud DOM
{/* a comment */}
Écrire un commentaire dans le JSX
cleanup return in useEffect
Toujours libérer les abonnements/minuteurs
Aucune entrée ne correspond à « :q ».
Besoin d'aide ?
Un problème avec cet outil ? Signalez-le à notre équipe.