DEV Community: Shreyansh Jha

Angular 22 Signals State Management: A Beginner's Guide

Shreyansh Jha — Sun, 26 Jul 2026 14:36:37 +0000

Managing application state has always been an important part of Angular development. Earlier, developers relied on RxJS, BehaviorSubject, and libraries like NgRx to build reactive applications.

With Angular Signals, state management becomes simpler, more efficient, and easier to maintain. Signals automatically notify Angular when data changes, eliminating the need for manual subscriptions in many scenarios.

In this article, we'll explore what Angular Signals are, how they work, and why they're becoming the preferred way to manage state in Angular applications.

What Are Angular Signals?
A Signal is a reactive container that stores a value and automatically updates the UI whenever that value changes.

Unlike BehaviorSubject, you don't need to subscribe or unsubscribe manually. Angular tracks dependencies automatically and updates only the affected components.

Types of Signals
Angular provides three main types of Signals.

1. Writable Signal
Writable Signals hold values that can be updated.

TypeScript:

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

count = signal(0);

increment() {
  this.count.update(value => value + 1);
}

HTML:

<h2>{{ count() }}</h2>

<button (click)="increment()">
  Increment
</button>

2. Computed Signal
Computed Signals derive values from other Signals.

import { signal, computed } from '@angular/core';

price = signal(1000);
quantity = signal(2);

total = computed(() => price() * quantity());

Whenever price or quantity changes, total updates automatically.

3. Effect
Effects run side effects whenever a Signal changes.

import { signal, effect } from '@angular/core';

username = signal('John');

constructor() {
  effect(() => {
    console.log(username());
  });
}

Effects are useful for logging, analytics, or updating local storage.

Benefits of Angular Signals

Less boilerplate code
No manual subscriptions
Fine-grained UI updates
Better performance
Easier state management
Built into Angular

When Should You Use Signals?

Signals are ideal for:

Component state
Shopping carts
User profiles
Dashboard data
Theme switching
Shared application state

Use RxJS when working with:

HTTP requests
WebSockets
Real-time streams
Complex asynchronous operations

Best Practices

Use signal() for mutable state.
Use computed() for derived values.
Use effect() only for side effects.
Keep Signals immutable by creating new objects or arrays when updating state.

Conclusion
Angular 22 Signals provide a modern and efficient way to manage application state. They reduce boilerplate, improve performance, and simplify reactive programming by removing the need for manual subscriptions.

For UI and component state, Signals are now the preferred choice, while RxJS continues to be the best option for handling asynchronous data streams. Using both together allows you to build scalable and high-performance Angular applications with clean, maintainable code.

Event-Driven Microservice Architecture: The Ultimate Guide for Modern Scalable Applications

Shreyansh Jha — Sun, 26 Jul 2026 14:23:18 +0000

Modern applications are expected to handle millions of users, real-time notifications, payment processing, IoT devices, and continuous data streams. Traditional synchronous communication between microservices often becomes a bottleneck as systems grow.
This is where Event-Driven Microservice Architecture (EDMA) comes into play.
Instead of directly calling another service using REST APIs, services communicate by publishing and consuming events. This makes applications more scalable, loosely coupled, fault-tolerant, and responsive.
In this guide, you'll learn everything about Event-Driven Architecture, including its working principles, architecture, advantages, disadvantages, implementation, best practices, and real-world examples.

What is Event-Driven Microservice Architecture?
Event-Driven Microservice Architecture is an architectural style where microservices communicate through events rather than direct API calls.
An event represents something important that has happened inside the system.

Examples include:

User Registered
Order Created
Payment Completed
Product Added to Cart
Invoice Generated
Email Sent
Shipment Delivered

Instead of Service A directly calling Service B, Service A simply publishes an event.
Any interested service listens for that event and performs its own work independently.
This approach removes direct dependencies between services.

Traditional Microservices vs Event-Driven Architecture
Traditional REST Communication

Customer Service
       │
       ▼
Order Service
       │
       ▼
Payment Service
       │
       ▼
Inventory Service
       │
       ▼
Notification Service

Problems:

Tight coupling
Multiple network calls
High latency
Single point of failure
Difficult scalability

Event-Driven Communication

                Event Broker
             (Kafka/RabbitMQ)

          ▲        ▲        ▲
          │        │        │

Order Service ---- Publish OrderCreated Event

                    │
         ┌──────────┼──────────┐
         ▼          ▼          ▼

Inventory     Notification    Analytics
 Service          Service       Service

The Order Service doesn't know who consumes the event.
Every interested service processes it independently.

Core Components of Event-Driven Architecture
1. Event Producer
Produces events whenever something important happens.

Example:

Order Service
User Service
Payment Service

Example event:
{ "event": "OrderCreated", "orderId": 10234, "customerId": 201, "amount": 1599 }

2. Event Broker
Acts as the middleman.

Popular Event Brokers:

Apache Kafka
RabbitMQ
Amazon SNS
Amazon SQS
Apache Pulsar
NATS
Azure Event Hub

Responsibilities:

Receive events
Store events
Route events
Deliver events
Retry failed events

3. Event Consumer
Consumes events and performs business logic.

Example:
Inventory Service receives:
OrderCreated

Then:

Reduce stock
Update inventory
Save logs

Real-World E-Commerce Example

Suppose a customer places an order.

Without Event-Driven Architecture:
Order Service │ ├── Payment Service ├── Inventory Service ├── Shipping Service ├── Email Service └── Analytics Service

The Order Service depends on every service.
If one service fails, the entire request may fail.

With Event-Driven Architecture:

Customer Places Order

       │

Order Service

Publishes

OrderCreated Event

       │

     Kafka

       │

 ┌───────────────┬───────────────┬─────────────┐

Inventory     Payment      Notification

Shipping      Analytics

Fraud Detection

Recommendation Engine

Each service processes the event independently.
The Order Service finishes immediately without waiting for other services.

Event Flow

Step 1
Customer places an order.
  ↓
Step 2
Order Service saves the order.
  ↓
Step 3
Order Service publishes:
`OrderCreated`
  ↓
Step 4
Kafka stores the event.
  ↓
Step 5
Subscribed services consume the event.
  ↓
Step 6
Each service executes its business logic.

When Should You Use Event-Driven Architecture?
Choose Event-Driven Architecture if your application requires:

High scalability
Real-time event processing
Loose coupling
Independent deployments
High availability
Asynchronous workflows

Avoid it for small applications with simple workflows, where synchronous REST APIs are easier to implement and maintain.

Conclusion
Event-Driven Microservice Architecture has become a cornerstone of modern cloud-native applications. By replacing tightly coupled synchronous communication with asynchronous event exchange, organizations can build systems that are scalable, resilient, and easier to evolve over time.

Whether you're building an e-commerce platform, banking application, IoT solution, or real-time analytics system, adopting an event-driven approach helps improve responsiveness, fault tolerance, and overall system flexibility.

With technologies like Apache Kafka, RabbitMQ, Spring Boot, and Spring Cloud Stream, implementing event-driven microservices is more accessible than ever. Following best practices such as designing immutable events, ensuring idempotency, implementing retries, and monitoring event flows will help you build production-ready distributed systems.

If you're preparing for Java Spring Boot, Microservices, or System Design interviews, mastering Event-Driven Architecture is an essential skill that will help you design modern, scalable software solutions.

How to Build a Custom Debounce Hook in React (Complete Guide)

Shreyansh Jha — Sun, 26 Jul 2026 13:55:50 +0000

Modern React applications often make API requests while users type into search boxes. Without optimization, every keystroke triggers a request, causing unnecessary network traffic and poor performance.

A custom debounce hook solves this problem by delaying execution until the user stops typing for a specified amount of time.

In this guide, you'll learn:

What debouncing is
Why it's useful
How to build a reusable useDebounce hook
How to use it in real-world applications
Common mistakes and best practices

What is Debouncing?

Debouncing is a technique that delays executing a function until a certain amount of time has passed since the last event occurred.

For example:

Without debouncing:
H He Hel Hell Hello
Every keystroke sends an API request.

With debouncing (500ms):
Typing... Typing... Typing... User Stops ↓ Single API Request
Instead of sending five requests, only one request is made after the user finishes typing.

Why Use a Custom Debounce Hook?

A reusable debounce hook provides several advantages:
Reduces unnecessary API calls
Improves application performance
Creates a better user experience
Prevents backend overload
Keeps React components clean and reusable

Creating the Custom Hook
Create a new file:

src/hooks/useDebounce.js

JavaScript Version

import { useEffect, useState } from "react";

function useDebounce(value, delay = 500) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => clearTimeout(timer);
  }, [value, delay]);

  return debouncedValue;
}

export default useDebounce;

TypeScript Version

import { useEffect, useState } from "react";

function useDebounce<T>(value: T, delay: number = 500): T {
  const [debouncedValue, setDebouncedValue] = useState<T>(value);

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => clearTimeout(timer);
  }, [value, delay]);

  return debouncedValue;
}

export default useDebounce;

Understanding the Hook

Let's break it down.

1. Store the Debounced Value
const [debouncedValue, setDebouncedValue] = useState(value);
Initially, it stores the current value.

2. Wait Before Updating
const timer = setTimeout(() => { setDebouncedValue(value); }, delay);
Instead of updating immediately, React waits for the specified delay.

3. Clear Previous Timer
return () => clearTimeout(timer);
If the user types again before the timer finishes, the previous timeout is cancelled.
Only the final value gets stored.

Using the Hook
Suppose we have a search component.

import { useState, useEffect } from "react";
import useDebounce from "./hooks/useDebounce";

function Search() {
  const [query, setQuery] = useState("");

  const debouncedQuery = useDebounce(query, 500);

  useEffect(() => {
    if (!debouncedQuery) return;

    console.log("Fetching:", debouncedQuery);

    // Fetch API
  }, [debouncedQuery]);

  return (
    <input
      value={query}
      onChange={(e) => setQuery(e.target.value)}
      placeholder="Search..."
    />
  );
}

export default Search;

How It Works
Suppose the user types:
R Re Rea Reac React

Without debounce:
API Call API Call API Call API Call API Call

With debounce:
Typing... (wait 500ms) ↓ API Call (React)
Only one request is sent.

When Should You Use Debouncing?

Use debouncing when:
Searching from an API
Filtering large datasets
Autocomplete inputs
Saving drafts automatically
Performing expensive calculations

Avoid it for:

Button clicks
Form submissions
Immediate UI updates

Conclusion
A custom useDebounce hook is one of the most useful utilities you can add to your React toolkit. It helps reduce unnecessary API calls, improves application performance, and provides a smoother user experience.
By encapsulating the debounce logic inside a reusable hook, your components remain clean, maintainable, and easy to test. Whether you're building search bars, dashboards, filters, or AI-powered applications, useDebounce is a simple optimization that delivers significant performance benefits.