React 17. What’s new?

Updaten van React 17.
In deze eerste React 17 release heeft het React team vooral gekeken naar de onderhoudbaarheid van huidige (React 16) en toekomstige webapplicaties. React bestaat inmiddels al een tijdje en heeft daarbij een aanzienlijk 'marktaandeel' opgebouwd. De kans is dan ook groot dat er een aantal applicaties bij zitten die al een tijd draaien, zonder actief ontwikkeld te zijn. Wilde je dan de applicatie updaten naar de volgende React? Dan moest je alles (inclusief dependancies) in één keer updaten. In React 17 is dat verleden tijd. Vanaf nu kan je ook delen van je applicatie updaten. Dit betekent geen problemen meer met dependancies en geen Big Bang updates meer.

Misschien is dit niet de meest spectaculaire nieuwe feature, toch zul je het React team over een jaar of twee hier dankbaar voor zijn. ;-)

‘Breaking’ voor je applicaties.
1. Cleanup van useEffect
Ten eerste wordt de cleanup van useEffect nu asynchroon afgehandeld. Dit zorgt ervoor dat view updates niet meer tegen gehouden worden door grote cleanup acties. Het nadeel hiervan is dat je er niet op kan vertrouwen dat de cleanup is afgerond voor er een nieuwe render plaatsvindt. Hou dit goed in de gaten tijdens het updaten.

2. Events
Ook zijn de React Synthetic Events weer iets dichterbij de normale browser implementatie gebracht, met name op het gebied van event bubbling. Dit is nu mogelijk doordat React 17 event delegation op de root-node van je applicatie plaatsvindt, in plaats van op de document root. Dit lost een hoop onverwachte situaties op, voornamelijk als je in een hybride SSR/SPA oplossing werkt waar je potentieel nog rechtstreekse DOM manipulatie doet. Dit zijn changes om rekening mee te houden. Maar grote kans dat als dit al je eigen code raakt, je hiervoor al een workaround hebt geschreven. Toch is dit wel het controleren waard. Kijk dan vooral naar je focus, blur en scroll events en of deze nog werken zoals je eerder had bedoeld.

3. JSX Transform
Maar qua developer-experience is de grootste verandering waarschijnlijk wel de nieuwe JSX Transform. Dit zorgt er namelijk voor dat je React niet meer hoeft te importen in elke file waar je JSX gebruikt. Dit lijkt misschien een kleine aanpassing, maar als je na gaat hoeveel components je applicatie heeft, is dit toch een leuke tijdsbesparing. En daarbij worden je presentationele components er ook een stukje netter van.

In mijn geval zorgt het er ook nog eens voor dat ik een hele snippet library uit VS Code kan verwijderen, omdat ik alleen de boilerplate snippet voor een nieuwe component gebruikte. Weer een extra voordeel.

Het mooie is dat JSX Transform nu gelijk beschikbaar is voor de nieuwe versies van Create-React-App, Next.Js, Gatsby en de Babel plugins & presets met een backwards compatibility van React versies die teruggaan tot React 14 (0.14.x).

Dus zit je op React 16.x? Update dan gelijk naar React 17 zodat je klaar bent voor de nieuwe features die gaan komen!