Hot girl summer is over and it’s time to dive back into JavaScript! Here’s what happened while you were out in React, Angular, and Vue:
React Updates
React 18 dropped in March 2022, and a lot has changed. A few things to note before you migrate your apps to React 18 and if you should, yet? Let’s touch on React 18 features in case you may have missed them.
New Render APIs
React 18 breaks a bunch of stuff but fortunately, the fire is contained. To take advantage of React 18 features, you'll need to use the new rendering APIs. These changes only affect your root component.
- For client-side apps, you now use
createRoot
instead ofReactDOM.render
. - For server side apps,
hydrateRoot
replacesReactDOM.hydrate
.
Check out the Official React Blog to learn about the new rendering APIs.
React Hooks.
Aside from the transition hooks we talked about earlier, React added even more new Hooks:
- useId: for generating unique IDs on both the client and server.
- useDeferredValue: lets you defer re-rendering a non-urgent part of the tree
- useSyncExternalStore: allows external stores to support concurrent reads by forcing updates to the store to be synchronous.
- useInsertionEffect: a new hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render.
Vue Updates
Moving on to Vue.js. Vue recently marked Vue 3 as the default version, but Vue 2 (now in Vue 2.7 beta) is still getting improvements in the meantime.
Vue 2.7
Vue 2.7 is still being maintained and receiving the same attention as Vue 3, the improvements, updates, and fixes are in parallel and towards giving the same developer experience on both versions.
More importantly, most features on Vue 3 are being backported for Vue 2.7 so that Vue 2 users can benefit from them as well, these features include:
Composition API support
The composition API is now enabled in Vue 2.7 with the officially maintained @vue/composition-api
package. Vue 2 users can take advantage of the Composition API.
Angular Updates
Coming to Angular! Angular 14 released is still fresh news with lots of exciting features including Standalone Pipes, Directives, and Components (Standalone PDC), Configurable Document Page Titles, and more. Read about that here
More features are being added with improvements and fixes to the existing ones, before migrating your components to Standalone PDC let’s walk through these.
Initializing an Angular App
This is the equivalent of having create-react-app
for angular.
As of Angular 14.2.0, you don’t need to install a CLI to create your app. Simply run npm init @angular
or yarn create @angular
to create a new Angular workspace and an initial starter app.
New Router Guards
There are plenty of use cases for Angular router guards: rerouting or restricting a user based on rights and permissions can be somewhat tricky to implement with the famous CanLoad
and CanActivate
guards.
To learn more about improvements, fixes, and new features including what is coming in Angular 14.2.0 read the ChangeLogs
Conclusion
What updates are you most excited about lately?