React 19.3: View Transitions stabile și Trusted Types

React 19.3 a ajuns pe npm pe 9 septembrie 2026. Este o versiune minoră fără modificări incompatibile, deci upgrade-ul în sine este plictisitor în sensul bun. Contează ce a ieșit din sertarul experimental. View Transitions și Fragment Refs sunt acum stabile, iar două adăugiri mai mici, use(browser()) și suportul pentru Trusted Types, schimbă discret modul în care gândești despre randare și securitate.

Am citit notele de lansare ca să poți sări peste hype și să ajungi la părțile care ating proiectele reale.

Ce a fost livrat efectiv

View Transitions a stat în spatele unui flag experimental timp de aproximativ un an și jumătate. Acum componenta <ViewTransition> este stabilă. Animează elementele pe măsură ce intră, ies, se mișcă sau se redimensionează și se conectează la API-ul View Transition al browserului alături de startTransition, Suspense și useDeferredValue. Un helper însoțitor, addTransitionType(), îți permite să variezi animația în funcție de ce a cauzat tranziția, de exemplu „next” față de „previous” pe un carusel.

Fragment Refs sunt și ele stabile. Poți atașa un ref la un <Fragment> și obții înapoi un set limitat de metode DOM pentru întregul grup de copii: addEventListener, focus(), observeUsing() pentru IntersectionObserver, plus câteva helpere de măsurare. Dacă ai randat vreodată o listă de frați și ai luptat cu React pentru a atașa un singur observer peste toți, acesta este remediul.

Apoi două lucruri care au primit mai puțină atenție, dar merită mai multă.

use(browser()) este o nouă opțiune de renunțare la randarea pe server. Apeleaz-o în interiorul unei componente și React suspendă acea componentă pe server, afișează fallback-ul Suspense în HTML-ul inițial, apoi o randează normal după hidratare. Este destinat componentelor care nu pot rula cu adevărat pe server, ca orice accesează localStorage sau fusul orar al utilizatorului.

Suportul pentru Trusted Types este cel care ne preocupă cel mai mult. React DOM obișnuia să convertească fiecare valoare la un string înainte de a o transmite DOM-ului. Acum trece TrustedHTML, TrustedScript și TrustedScriptURL nemodificate, astfel poți rula React sub o Content Security Policy cu require-trusted-types-for 'script' și obții protecție XSS bazată pe DOM la nivel de platformă.

Perspectiva noastră

Începe cu câștigul de securitate. În angajamentele de pentesting, găsim XSS bazat pe DOM mai des decât se așteaptă echipele, de obicei printr-un apel dangerouslySetInnerHTML care are încredere în date pe care nu ar trebui să le aibă. Trusted Types mută verificarea în browser. Dacă o valoare nu a trecut printr-o politică Trusted Types, atribuirea aruncă o excepție în loc să execute. Acesta este tipul de apărare care rezistă chiar și atunci când un dezvoltator greșește ulterior. Când configurăm Cloudflare și CSP pentru clienți, acesta este controlul stratificat pentru care insistăm și acum React nu mai luptă împotriva lui.

Problema este că Trusted Types ajută doar dacă îl activezi. React 19.3 face React compatibil. Nu setează header-ul CSP pentru tine. Sfatul nostru pentru această săptămână este concret. Adaugă require-trusted-types-for 'script' în modul raport-only, lansează-l și urmărește rapoartele de încălcare câteva săptămâni înainte să îl aplici forțat. Vei găsi sink-urile pe care le-ai uitat fără să strici producția.

Fii atent cu use(browser()). Este un API curat, dar înseamnă că conținutul componentei lipsește din HTML-ul randat pe server. Pentru un widget de setări, bine. Pentru orice ce un motor de căutare sau un scraper de rețele sociale trebuie să vadă, acel conținut este acum invizibil la prima randare. Am văzut echipe dăunând propriului SEO prin împingerea prea multor randări către client. Folosește-l pentru componente-frunzișoare exclusiv browser, nu pentru conținut care contează pentru crawlere.

Echipele de mobil, mai așteptați puțin. View Transitions funcționează doar în DOM momentan. Echipa React spune că suportul React Native este în curs de dezvoltare, dar nu a ajuns încă. În munca noastră nativă pe iOS și Android ne bazăm oricum pe API-urile de tranziție proprii platformei, iar pentru proiectele React Native am amâna proiectarea în jurul <ViewTransition> până când va fi lansat efectiv pentru platformă. Nu construi un strat de animație partajat pe un API care trăiește pe o singură țintă.

Un lucru de făcut acum

Alege cea mai mică aplicație React, upgradează la 19.3 pe o ramură și activează Trusted Types în modul raport-only. Este o modalitate cu risc scăzut de a vedea câtă muncă DOM nesigură se ascunde în codul tău și upgrade-ul nu are modificări incompatibile care să te încetinească. Dacă raportul vine curat, bine. Dacă nu, tocmai ai găsit backlogul de securitate al sprintului următor.

Dacă livrarea rapidă fără a lăsa găuri XSS în urmă îți sună familiar, hai să discutăm. Facem asta pentru echipe de web și mobil în fiecare săptămână, de la build-uri cloud-native la recenzii de securitate.