React 19 introduceert significante verbeteringen in hoe het omgaat met scripts van derden en browserverlengingen tijdens hydratatie, waardoor een soepelere ervaring biedt in vergelijking met eerdere versies. Hier zijn de belangrijkste verschillen:
onverwachte tags overslaan
In React 19, als discrepanties worden gedetecteerd door wijzigingen die worden aangebracht door scripts of extensies van derden, gaat reageren intelligent over de onverwachte tags in plaats van het activeren van opnieuw weergeven fouten [1] [2]. Deze aanpak minimaliseert mogelijke verstoringen veroorzaakt door externe scripts, waardoor een meer naadloze gebruikerservaring wordt gewaarborgd.
Stylesheets bewaren
Wanneer React het hele document opnieuw moet weergeven vanwege een hydratatiemismatch die geen verband houdt met wijzigingen van derden, behoudt het nu eventuele stylesheets die zijn ingevoegd door die scripts [1] [2]. Deze verbetering behoudt de visuele integriteit van de toepassing, zelfs wanneer discrepanties worden gedetecteerd.
Verbeterde compatibiliteit
React 19 verbetert de hydratatiecompatibiliteit door onverwachte tags over te slaan in de `
` en `` secties van het document [2]. Dit betekent dat als een script van derden elementen heeft ingevoegd die niet overeenkomen met de server-gerenderde HTML, React niet zal proberen deze verschillen te verzoenen, waardoor potentiële fouten en verstoringen worden vermeden.Verminderde fouten
In eerdere versies kunnen wijzigingen die door scripts van derden worden aangebracht, leiden tot hydratatiefouten, omdat React zou proberen de server-gerenderde HTML te verzoenen met de gewijzigde client-side HTML [2]. React 19 behandelt dit probleem door deze wijzigingen tijdens de hydratatie te negeren, waardoor de toepassing soepel kan functioneren zonder te worden beïnvloed door externe veranderingen.
Deze verbeteringen in React 19 verbeteren de robuustheid van hydratatie en bieden een soepelere ontwikkelingservaring door de frequentie en impact van hydratatiefouten gerelateerd aan interacties van derden te verminderen.
Citaten:[1] https://webdeveloper.beehiiv.com/p/react-19-beta-release-quick-guide
[2] https://www.ghazikhan.in/blog/exploring-whats-new-in-react-19
[3] https://www.metizsoft.com/blog/react-19-latest-features-and-updates
[4] https://taglineinfotech.com/react-19-update-what-developers-need-to-know/
[5] https://www.kellton.com/kellton-tech-blog/react-19-latest-features-and-updates
[6] https://www.geeksforgeeks.org/react-19-new-features-anddates/
[7] https://www.epicweb.dev/tips/whats-coming-in-react-19-beta
[8] https://react.dev/blog/2024/04/25/react--19