Si t'as lâché React Native il y a quelques versions parce que les upgrades te donnaient des sueurs froides, j'ai une bonne nouvelle : la version 0.83 est la première release sans aucun breaking change. Oui, tu as bien lu. Zéro. Nada. Tu peux upgrader et retourner boire ton café tranquille.
Mais ce serait dommage de s'arrêter là, parce que cette release apporte des trucs vraiment sympas. Décortiquons tout ça ensemble.
React 19.2 : deux nouveautés qui méritent ton attention
Le composant Activity : bye bye le conditional rendering galère
Tu connais ce pattern où tu dois cacher/afficher des parties de ton app tout en gardant leur état ? Genre un formulaire de recherche avec des filtres complexes que l'utilisateur a passé 2 minutes à configurer ?
Jusqu'ici, tu avais deux options pas terribles :
Conditional rendering classique → l'état est perdu
CSS/opacity tricks → le composant reste monté et consomme des ressources
<Activity> résout ce problème élégamment :
import { Activity } from 'react';
function SearchPanel({ isVisible }) {
return (
<Activity mode={isVisible ? 'visible' : 'hidden'}>
<ComplexFilterForm />
<SearchResults />
</Activity>
);
}Quand le mode passe à 'hidden', React :
Cache visuellement les enfants
Démonte les effects (donc tes subscriptions, timers, etc. sont nettoyés)
Mais conserve l'état interne
Quand ça repasse en 'visible', tout revient exactement comme avant. L'utilisateur retrouve ses filtres, sa sélection, tout. C'est particulièrement utile pour les apps avec des onglets ou des wizards multi-étapes.
useEffectEvent : la fin des dépendances useEffect bancales
Combien de fois t'as écrit ce genre de code ?
// ❌ Le pattern qu'on a tous fait au moins une fois
useEffect(() => {
const handler = () => {
onSomethingHappened(currentValue); // currentValue dans les deps ?
};
someExternalSystem.subscribe(handler);
return () => someExternalSystem.unsubscribe(handler);
}, [onSomethingHappened]); // eslint-disable-line react-hooks/exhaustive-depsCe commentaire eslint-disable qui traîne, c'est le symptôme d'un vrai problème. Tu veux réagir à un événement externe, mais tu te retrouves à gérer des dépendances qui n'ont rien à voir.
useEffectEvent sépare proprement la logique "événementielle" :
// ✅ La nouvelle approche propre
const onSystemEvent = useEffectEvent(() => {
// Cette fonction a toujours accès aux valeurs fraîches
// mais ne déclenche PAS de re-run de l'effect
onSomethingHappened(currentValue);
});
useEffect(() => {
someExternalSystem.subscribe(onSystemEvent);
return () => someExternalSystem.unsubscribe(onSystemEvent);
}, []); // Pas de dépendances bancales !Le hook useEffectEvent crée une fonction stable qui capture toujours les dernières valeurs, sans pour autant être une dépendance de ton effect. Fini les bugs subtils de closures !
DevTools : enfin à la hauteur
Network Panel : voir ce qui se passe vraiment
Si tu debuggais les requêtes réseau avec des console.log partout ou Flipper (paix à son âme), tu vas être content. Le nouveau Network Panel intégré te donne :
La liste de toutes tes requêtes
fetch,XMLHttpRequestet même<Image>Les timings détaillés (DNS, connexion, TTFB, download...)
Headers request/response
Preview de la réponse
Et surtout : l'onglet Initiator qui te montre exactement d'où vient chaque requête dans ton code
Plus besoin de chercher quel useEffect déclenche cette requête mystérieuse qui spam ton backend.
Performance Panel : comprendre où ça rame
Le Performance Panel te permet d'enregistrer des sessions et de visualiser :
L'exécution JavaScript
Les tracks de performance React
Les événements réseau
Tes propres User Timings
Concrètement, si ton app lagge quand l'utilisateur scroll une liste, tu peux maintenant voir précisément quelle fonction JavaScript prend trop de temps.
L'app desktop native : bye bye les onglets Chrome
Les DevTools ne s'ouvrent plus dans un onglet browser random. T'as maintenant une vraie app desktop qui :
Se lance plus vite
Ne dépend plus de Chrome/Edge
Se souvient de la position de ta fenêtre
Petit détail qui fait plaisir : la fenêtre remonte automatiquement quand tu hits un breakpoint. Plus besoin de jongler entre 47 fenêtres.
IntersectionObserver : le lazy loading natif arrive
C'est en canary pour l'instant, mais ça mérite d'être mentionné. Si tu viens du web, tu connais IntersectionObserver pour détecter quand un élément entre dans le viewport. C'est la base du lazy loading d'images, des animations au scroll, des infinite lists...
// Bientôt dans ton code React Native
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// L'élément est visible !
loadHeavyContent();
}
});
});
observer.observe(myViewRef);
Plus besoin de libs tierces pour ces patterns. Et ça utilise les APIs natives sous le capot, donc c'est performant.
Web Performance APIs : mesurer pour optimiser
Les APIs de performance du web débarquent en stable :
// Mesurer le temps d'une opération
performance.mark('fetchStart');
await fetchData();
performance.mark('fetchEnd');
performance.measure('fetchDuration', 'fetchStart', 'fetchEnd');
// Observer les métriques en temps réel
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach(entry => {
console.log${entry.name}: ${entry.duration}ms);
});
});
observer.observe({ entryTypes: ['measure', 'longtask'] });Le truc cool : PerformanceObserver fonctionne aussi en production. Tu peux donc collecter des métriques réelles de tes utilisateurs et les envoyer à ton service d'analytics.
Hermes V1 : le moteur JS passe à la vitesse supérieure
Hermes, le moteur JavaScript de React Native, a droit à une refonte majeure. C'est encore expérimental, mais les premiers retours sont prometteurs côté perfs.
Pour l'activer, c'est un peu plus technique (il faut builder depuis les sources), mais si tu bosses sur une app avec du JS intensif (calculs, parsing de gros JSON...), ça vaut le coup de tester.
Tips bonus : optimiser ton build iOS
Deux flags expérimentaux intéressants :
Compiler sans la Legacy Architecture
RCT_REMOVE_LEGACY_ARCH=1 bundle exec pod installDans leurs tests, ça réduit le temps de build de 73 à 58 secondes et la taille de l'app de 51 à 48 Mo. Gratuit.
Debugger les binaires précompilés
Pour les développeurs de modules natifs, il y a maintenant moyen de mettre des breakpoints dans le code React Native même avec les binaires précompilés. Ça demande quelques manips LLDB, mais c'est documenté.
Comment upgrader ?
Si tu es sur 0.82, c'est littéralement :
# Vérifier les changements nécessaires (spoiler : y'en a pas)
npx react-native upgradePour un nouveau projet :
npx @react-native-community/cli@latest init MyProject --version latestSi tu utilises Expo, 0.83 sera dispo avec le SDK 55 en janvier 2026.
Cette release marque un vrai tournant. Pas par ses features individuelles (même si elles sont chouettes), mais par ce qu'elle représente : une équipe qui a compris que la stabilité compte autant que les nouvelles fonctionnalités.
Le fait qu'il n'y ait aucun breaking change, c'est pas anodin. Ça veut dire que tu peux upgrader sans passer une journée à fixer des trucs cassés. Ça veut dire que l'écosystème de libs peut suivre plus facilement. Ça veut dire moins de fragmentation.
Les DevTools repensés sont aussi un signal fort. Pendant des années, l'expérience dev sur React Native était... disons perfectible. Là, on se rapproche de ce qu'on a sur le web, et c'était vraiment nécessaire.
Bref, si tu hésitais à te (re)mettre à React Native, c'est peut-être le bon moment.
