18 & 19 in ‘24:Unveiling Angular & Reacts Latest Updates!

7 min readJun 21, 2024

👨‍💻 As a Senior Full Stack engineer and web development enthusiast, I’ve had the opportunity to work extensively with both Angular and React frameworks. It’s always thrilling to explore the latest features that enhance web performance.

“Embracing the latest changes and enhancements is crucial for evolving our systems and staying ahead in today’s dynamic landscape.”

Quick Introduction:

If you’re unfamiliar with what these web frameworks are

Angular: Angular is a powerful front-end framework supported by Google, offering extensive tools for building web applications efficiently.

React: React, created by Facebook, is a JavaScript library that simplifies building interactive user interfaces through reusable components and efficient rendering techniques.

Exciting developments are in motion with the latest releases of Angular 18 and React 19. I look forward to exploring their compelling features

Angular 18

For those who are new to Angular, Home • Angular has now become a comprehensive and valuable resource to begin your journey. It offers a wealth of information, tutorials, and guides that are perfect for exploring and learning the ins and outs of Angular development.

Let’s dive into the latest enhancements and explain these features in a general way, especially if you’re new to Angular.

🟫Improvements in Change Detection

Zone.js manages asynchronous operations, enabling automatic change detection in Angular.

Usage in Angular:

Patches async APIs
Triggers change detection

Drawbacks:

Performance overhead
Complex debugging
Library incompatibilities

Example:

With Zone.Js

import { Component } from '@angular/core';

@Component({
  selector: 'app-article',
  template: `
    <div>
      <p>Is Article Published: {{ isArticlePublished }}</p>
      <button (click)="publishArticle()">Publish Article</button>
    </div>
  `
})
export class ArticleComponent {
  isArticlePublished = false;

  publishArticle() {
    setTimeout(() => {
      this.isArticlePublished = true;
    }, 1000);
  }
}

Without zone.js

import { Component, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-article',
  template: `
    <div>
      <p>Is Article Published: {{ isArticlePublished }}</p>
      <button (click)="publishArticle()">Publish Article</button>
    </div>
  `
})
export class ArticleComponent {
  isArticlePublished = false;

  constructor(private cdr: ChangeDetectorRef) {}

  publishArticle() {
    setTimeout(() => {
      this.isArticlePublished = true;
      this.cdr.detectChanges();  // Manually trigger change detection
    }, 1000);
  }
}

With Angular 18, we can experiment with zoneless support in Angular! Simply add provideExperimentalZonelessChangeDetection to your application bootstrap:

@Component({
  ...
  template: `
    <h1>Hello from {{ name() }}!</h1>
    <button (click)="handleClick()">With Zoneless</button>
  `,
})
export class App {
  protected IsArticlePublished= signal('false');

  handleClick() {
    this.IsArticlePublished.set('true');
  }
}

Angular uses zones to optimize change detection, but it can also work with fewer triggers, such as signal updates, without zones.

🟫Angular Material 3

Angular Material is a UI component library for Angular applications that implements Google’s Material Design specification. It provides a set of reusable, well-tested, and accessible UI components such as buttons, inputs, dialogs, navigation patterns, and more.

These components are designed to follow Material Design principles, offering a consistent and attractive user interface for web applications.

Ref: Angular Material UI component library

🟫Signal APIs in preview

Signals are encapsulations of values that alert interested consumers upon any changes to the enclosed value. They can hold a wide range of data, spanning from basic types to intricate data constructs.

Accessing a signal’s value involves invoking its getter function, enabling Angular to monitor its usage.Signals may exist in writable or read-only forms.

Ref: Signals • Overview • Angular

🟫Deferrable views

In component templates, deferrable views allow delaying the loading of specific dependencies such as components, directives, pipes, and their associated CSS.

This feature is implemented by enclosing a section of your template within a @defer block, where you define the conditions under which these dependencies should be loaded.

@defer {
  <articlereview-component />
}

deferrable views will enable developers to effortlessly improve their apps and reduce the bundle size.

🟫Event replay

Enables the capability to replay user events (such as clicks) that occurred on a page before the hydration logic finishes.

Example

Many developers won’t typically interact directly with event dispatching, so let’s explore why event replay is valuable in this context. Imagine a scenario on an article reading website. We’ll simulate a slow network connection with artificial loading delays.

While the page is loading and before it’s fully interactive, a user reads an article and decides to leave comments on several articles. If the page isn’t fully interactive yet (not hydrated), these user actions would be lost.

Starting with version 18, Angular introduces event dispatching to record such user interactions. Once the page is fully hydrated, Angular replays these events, ensuring all comments are successfully submitted across multiple articles

bootstrapApplication(App, {
  providers: [
    provideClientHydration(withEventReplay())
  ]
});

🟫Fallback for content for ng-content

@Component({
  selector: 'app-article',
  template: `
    <ng-content select=".article">Article Name</ng-content>

    <ng-content>No Comments</ng-content>
  `,
})
export class Article{}

🟫Unified Form control state change events

One of my personal favorites: The FormControl, FormGroup, and FormArray classes in Angular forms now feature an ‘events’ property.

This property enables subscription to a stream of events related to the form control, allowing you to monitor changes in value, touch state, pristine status, and overall control status.

const articleFeedbackControl= new FormControl<string|null>('article', Validators.required);
nameControl.events.subscribe(event => {
 
});

🟫Route redirects Improvements

In Angular v18, to enhance flexibility in handling redirects, the redirectTo property now supports a function that returns a string.

This allows implementing more complex redirect logic based on runtime conditions. For instance, if you need to redirect to a route that depends on dynamic state, you can define intricate logic within this function:

const routes: Routes = [
  { path: 'article/:articleId', component: ArticleComponent },
  {
    path: 'redirect-article',
    redirectTo: ({ queryParams }) => {
      const articleIdParam = queryParams['articleId'];
      if (articleIdParam) {
        return `/article/${articleIdParam}`;
      } else {
        // You can handle errors or redirect to a default route
        return `/not-found`;
      }
    }
  },
  { path: 'not-found', component: NotFoundComponent },
];

🟫Build Improvements

Angular 16 unveiled a new application builder leveraging modern tools like esbuild and Vite. This builder has become the default for new projects in Angular 17.

Migrating to new build system • Angular

Let’s discuss about React 19 features now

React 19

🟢React Compiler

Currently, React doesn’t automatically re-render on state change. To optimize these re-renders, developers often manually use useMemo(), useCallback(), and memo APIs.

The React team has introduced a solution: the React compiler. This new compiler is designed to automate the management of re-renders. React now determines autonomously when and how to update state and refresh the user interface.

🟢Actions

In version 19, an exciting new feature will be Actions, which promises to revolutionize our approach to working with forms.

Actions will enable seamless integration of functionalities directly with the HTML <form/> tag. Put simply, you can now substitute the onSubmit event with Actions, utilizing them as attributes within HTML forms

"use server"
const submitArticle = async (articleData) => {
    const newArticle = {
        title: articleData.get('title'),
        author: articleData.get('author'),
        content: articleData.get('content')
    };
   
};

const ArticleForm= () => {
    return <form action={submitArticle}>
        <div>
            <label>Article Name</label>
            <input type="text" name='title'/>
        </div>
        <div>
            <label>Author Name</label>
            <input type="text" name="author" />
        </div>
        <div>
            <label>Content</label>
            <input type="text" name="content" />
        </div>
        <button type='submit'>Submit</button>
    </form>
}

export default ArticleForm;

🟢Document Metadata

Components such as ‘title,’ ‘meta tags,’ and ‘description’ play a vital role in optimizing SEO and ensuring accessibility. In React, where single-page applications are widely used, managing these components across various routes can become cumbersome.

Presently, developers frequently resort to writing custom code or employing tools like react-helmet to manage route transitions and update metadata as needed. However, this approach can be repetitive and prone to errors, particularly when handling critical SEO elements such as meta tags.

Current:

import React, { useEffect } from 'react';

const ArticleHead = ({ title, description }) => {
    useEffect(() => {
        document.title = title;

        const metaDescriptionTag = document.querySelector('meta[name="description"]');
        if (metaDescriptionTag) {
            metaDescriptionTag.setAttribute('content', description);
        }
    }, [title, description]);

    return null;
};

export default ArticleHead;

With React 19:

In React19, we have the capability to directly utilize the title and meta tags within our React components:

import React from 'react';

const HomePage = () => {
  return (
    <>
      <title>Article Home Page - My Website</title>
      <meta name="description" content="Explore the latest articles and updates on various topics." />
      {/* Page content goes here */}
    </>
  );
};

export default HomePage;

🟢New React Hooks

Actions with useTransition:

Introduces the useTransition hook for handling pending states during data mutations.
Enables efficient management of optimistic updates, errors, and sequential requests.

New Hooks:

useOptimistic: Provides instant feedback during form submissions.
useFormStatus: Manages form status (e.g., pristine, dirty, touched).
useFormState: Tracks form state including values and errors.
useActionState: Simplifies common action scenarios.

This is an interesting topic that deserves a separate article for a thorough discussion

And also, there are following upcoming improvements in React include:

Performance improvements through optimized asset loading using suspense.
Integration of web components directly into React for seamless usage.

Web Components — React (reactjs.org)

👨‍💻 I’m eager to dive into Angular 18 and React 19, two well-known web frameworks. Here’s what caught my eye:

Angular 18:

Zoneless support
Angular Material 3
Signal APIs
Deferrable views
Event replay
Route redirects
New application builder

React 19:

React compiler
Actions
Document metadata
New hooks: useTransition, useOptimistic, useFormStatus, useActionState

These updates promise to enhance web performance, user experience, SEO, and developer productivity significantly. Can’t wait to explore and learn! 🚀

💡I trust my introduction has sparked your curiosity to explore Angular 18 and React 19 for your software project.