V React 19 se manipulace s neočekávanými značkami během hydratace významně zlepšilo, zejména v tom, jak interaguje s skripty třetích stran a rozšířením prohlížeče. Zde jsou konkrétní příklady toho, jak React 19 přeskočí neočekávané značky:
Přeskočení neočekávaných značek
1. Prvky hlavy a těla: Když se React setká s neočekávanými značkami v `
2. Zachování stylů: Pokud React potřebuje znovu vykreslit celý dokument kvůli neshodě hydratace, který nesouvisí s úpravami třetích stran, ponechává na svém místě jakékoli styly, které byly vloženy těmito skripty. Tím je zajištěno, že vizuální integrita aplikace zůstává neporušená, i když jsou detekovány nesrovnalosti [2] [4].
3. manipulace s úpravami třetích stran: Dříve by jakékoli úpravy provedených skripty třetích stran mohly vést k chybám hydratace, protože React by se pokusila smířit HTML vyplacenou serveru s upraveným HTML na straně klienta. V React 19 jsou tyto modifikace během hydratace ignorovány, což umožňuje aplikaci pokračovat v fungování hladce, aniž by byla ovlivněna vnějšími změnami [1] [4].
Příklad scénář
Zvažte scénář, ve kterém skript třetích stran přidá značku `
Tato zlepšení v React 19 nejen zvyšuje robustnost hydratace, ale také poskytují hladší vývojový zážitek snížením frekvence a dopadu hydratačních chyb souvisejících s interakcemi třetích stran.
Citace:[1] https://webdeveloper.beehiiv.com/p/react-19-beta-release-quick-guide
[2] https://www.epicweb.dev/tips/whatscoming-in-react-19-beta
[3] https://sentry.io/answers/hydratation-error-nextjs/
[4] https://react.dev/blog/2024/04/25/react-19
[5] https://github.com/facebook/react/issues/26224
[6] https://github.com/cypress-io/cypress/issues/27204
[7] https://legacy.reactjs.org/docs/hooks-reference.html
[8] https://www.kellton.com/kellton-tech-blog/react-19-latest-features-and-opdates