This article explores that evolution in depth: how HTTP/1.1, 2, and 3 differ, what they mean for back-end and front-end developers, and how platforms like Nginx, Vercel, and Cloudflare bring it all together.

Settle in — this article is not a quick read, but it gathers the detail that turns “black-box performance” into predictable engineering.

When your React or React Native app loads, hundreds of packets race across networks governed by invisible rules — HTTP versions. Each upgrade — from HTTP/1.1 to HTTP/2 to HTTP/3 — reshaped how browsers, servers, and frameworks communicate.
Understanding these layers helps developers build faster, safer, and more resilient applications.

Why Protocol Versions Still Matter

Modern frameworks (Next.js, Remix, Astro, Expo) handle a lot for you, but protocol behavior still affects:

• Latency on first load and during navigations

• Tail performance (p95/p99) under packet loss or mobile transitions

• Concurrency of module, font, image, API, and streaming fetches

• Security posture (TLS 1.3, replay risks, Zero‑Trust hops)

• Observability and capacity planning

Layer Refresher (Mental Model)

• Application Layer: Defines HTTP request/response meaning (methods, headers, bodies) and stays stateless per request.

• Transport Layer: Moves bytes reliably (TCP) or via independent encrypted streams (QUIC over UDP).

• Encryption: TLS 1.2/1.3 secures data above TCP; QUIC bakes TLS 1.3 directly into transport.

• Multiplexing: Multiple logical streams share one connection (HTTP/2 on TCP; HTTP/3 on QUIC without cross-stream blocking).

Analogy:
HTTP defines the message.
TCP insists every letter arrive strictly in order.
QUIC lets each envelope arrive independently—no one waits for the slowest.

HTTP/1.1 — in a modern web environment

HTTP/1.1 powered the early web. It introduced

• persistent connections

• Chunked transfer encoding

• Basic caching semantics enhancements

but every request still traveled over a single, ordered TCP stream.

When packet #5 was delayed, packets #6–#100 waited behind it.
This created one of the web’s earliest bottlenecks: Head-of-Line Blocking (HOLB).

Deep Dive: HTTP is Stateless, but HOLB Isn’t

A common question is:

“If HTTP is stateless, why does one delayed packet stall everything?”

Here’s the distinction:

• HTTP lives at the application layer — defining what data is exchanged (GET, POST, headers, body). It’s statelessbecause each request carries all needed context and doesn’t depend on earlier ones.

• HOLB lives at the transport layer (TCP) — which guarantees ordered delivery of packets. If a packet is lost, the entire stream waits until it’s retransmitted.

The transport layer decides how data travels — handling delivery, ordering, and error correction between endpoints.

So while HTTP doesn’t maintain conversation state, the underlying TCP connection does maintain ordering state. That’s what causes global delays.

HTTP/2 — Multiplexing and Compression, But Transport HOLB Remains

HTTP/2 reimagined how data flows over the same TCP base, bringing four key upgrades:

1. Binary framing — Requests/responses are split into structured frames for faster parsing.

2. Multiplexing — Multiple requests share one connection via independent streams.

3. HPACK header compression — Repeated headers like cookies are encoded as dictionary references.

4. Server Push(Deprecated in Practice) — Servers can pre-send assets they expect the client would need.

What Improved:

• Eliminated application-layer HOLB (no strict request sequencing).

• Fewer TLS handshakes; better use of a single congestion window.

• Significant header byte reduction for chatty APIs or GraphQL endpoints.

What Didn’t:

• Transport-level HOLB remains. One lost TCP packet still stalls delivery of frames for all streams sharing that TCP connection until retransmission completes.

Why Server Push Fell Away:

• Complexity in correctness (over-pushing/waste).

• Hard to cache predictably.

• Browsers (e.g., Chrome, Firefox) disabled or deprecated it. Use instead: rel=preload, rel=preconnect, HTTP 103 Early Hints.

🔐 TLS 1.3, ALPN, and Edge Termination

Modern HTTP effectively means HTTPS.

TLS 1.3:

• Fewer round trips (1-RTT; 0-RTT possible on resumption).

• Forward secrecy enforced.

• Cleaner cipher suite landscape.

ALPN (Application-Layer Protocol Negotiation):

• Client offers: h2, h3, http/1.1.

• Server picks the highest mutually supported (e.g., h2 or h3).

TLS Termination at the Edge

On platforms like Vercel, Cloudflare, and Netlify, TLS usually terminates at their edge:

• Browser ↔ Edge: Encrypted (TLS 1.3).

• Edge ↔ Your Backend: Often re-encrypted with HTTPS, sometimes proxied via HTTP for internal performance.

• Frameworks such as Express or Django must use trust proxy headers (X-Forwarded-Proto, Host, For) to interpret the original connection as secure.

Vercel note:
Serverless functions on Vercel run within the same TLS-terminated environment. You don’t manage certificates — the edge fabric handles TLS 1.3 automatically.

For self-hosting, Nginx or Caddy can terminate TLS and optionally re-encrypt upstream traffic using HTTPS or mTLS — aligning with Zero-Trust principles (“verify and encrypt every hop”).

HTTP/3 — QUIC: Stream Independence & Mobility

QUIC(RFC 9000) stands for Quick UDP Internet Connections — a transport protocol that blends reliability, encryption, and parallelism on top of UDP.

Key Concepts

• 0-RTT (Zero Round-Trip Time): Clients reuse keys from previous sessions to send data immediately without a handshake. Great for mobile users reconnecting frequently.

• Stream Independence: Each stream has its own packet numbering and flow control. Packet loss affects only that stream — others continue unaffected.

• Connection Migration: Sessions are tied to a connection ID rather than an IP address. If a device switches from Wi-Fi to 4G, the same connection continues.

• Built-in TLS 1.3: Encryption is mandatory and integrated into the transport layer.

• Header Compression: QPACK (not HPACK). Designed to avoid introducing head-of-line blocking during header table synchronization in a loss scenario.

Performance Gains:

• Improved tail latency on lossy, mobile, or high-jitter networks.

• Faster recovery from packet loss; unaffected streams continue.

• Reduced handshake overhead (esp. with resumption).

Adoption:

• Major CDNs and browsers widely support HTTP/3.

• gRPC over HTTP/3, and is supported by some of the languages

  • Go / Rust: Strong HTTP/3 + QUIC libraries.

  • Node.js: Experimental / progressing; see Node.js issue #57281.

  • Python: User-space libs (aioquic) or via edge proxies (Caddy, Cloudflare) rather than stdlib.

  • Java / .NET: HTTP/3 adoption moving through library layers (Netty, Jetty, Kestrel updates).,

Practical Impact by Role

Frontend / Web App Engineers

• Don’t over-bundle solely to reduce request count (HTTP/2+ handles concurrency). Still bundle for code splitting strategy and caching boundaries.

• Use rel=preload (critical CSS, fonts), rel=preconnect (third-party origins), and rel=dns-prefetch.

• Prefer Early Hints (103) when supported to prime fetches earlier.

• Eliminate bloat: large cookies and verbose headers consume compression tables.

• Measure p95 Resource Timing vs just “Time to First Byte.”

React Native / Mobile Clients

• HTTP/3 improves resilience when radios churn (Wi‑Fi ↔ 4G).

• Use keep-alive pools carefully; minimize forced connection churn.

• Monitor tail API latencies under network transitions (simulate with network link conditioners).

Backend / API Engineers

• Reduce header entropy (avoid ever-growing dynamic data in headers) to maximize HPACK/QPACK efficiency.

• Validate proxies preserve :authority and correct scheme for downstream auth logic.

• Tune HTTP/2 max concurrent streams and flow windows if using high-volume streaming (gRPC).

Infra / Platform

• Roll out HTTP/3 via CDN toggle first—low risk.

• Track metrics: loss %, retransmissions, handshake times, p95 vs p99 request latency segments.

• Consider mTLS for internal re-encryption; align with Zero-Trust.

• Use Alt-Svc headers to advertise HTTP/3 (Alt-Svc: h3=”:443”; ma=86400).

How to Inspect Which Protocol You’re Using

Browser DevTools:

1. Open Network panel > right-click column header > enable “Protocol”.

2. Reload — look for h2, h3, or http/1.1

# Force HTTP/2
curl -I --http2 https://example.com

# Attempt HTTP/3 (curl must be built with nghttp3/quiche)
curl -I --http3 https://example.com

# Detailed HTTP/2 framing
nghttp -ans https://example.com

# QUIC packet-level trace (advanced)
sudo qlogctl … (platform-specific) 

Minimal Nginx Config Examples

HTTP/2 Enablement (production-stable):

server {
    listen 443 ssl http2;
    server_name example.com;

    ssl_certificate     /etc/ssl/fullchain.pem;
    ssl_certificate_key /etc/ssl/privkey.pem;

    location / {
        root /var/www/html;
        index index.html;
    }
}

HTTP/3 (QUIC) Example (requires nginx-quic or alternative like Caddy):

server {
    listen 443 ssl http2;
    listen 443 quic reuseport;

    server_name example.com;

    ssl_certificate     /etc/ssl/fullchain.pem;
    ssl_certificate_key /etc/ssl/privkey.pem;

    add_header Alt-Svc ‘h3=”:443”; ma=86400’;

    location / {
        root /var/www/html;
        index index.html;
    }
}

Note: Mainline Nginx may not yet include native QUIC in all distributions—verify your build.

Closing Thought

Every upgrade of HTTP rewired how the web feels.
HTTP/2 gave us speed through multiplexing.
HTTP/3 gave us resilience through QUIC.
TLS 1.3 and Zero-Trust made every hop secure by design.

We don’t code the protocol —
But it decides how fast, safe, and seamless our code feels to the world.

If you want to learn above detail, as part of mentoring conversation reach back to us at prabodh

Want to understand the mathematical foundations of one of the most important cryptographic systems in the digital world? read through this article …

Introduction

This article explores RSA cryptography from a mathematical perspective, designed to bridge the gap between pure mathematics and its real-world applications in computer science. Through clear explanations and practical examples, we'll discover how elegant

mathematical concepts like prime numbers, modular arithmetic, and Fermat's Little Theorem come together to create one of the most important encryption systems in the digital world.

RSA was developed by Ron Rivest, Adi Shamir, and Leonard Adleman at the Massachusetts Institute of Technology (MIT) in 1977. This asymmetric cryptosystem revolutionized secure communication by using the mathematical difficulty of factoring large composite numbers as its foundation.

Foundation Concepts: Prime Numbers and Coprimality

Before diving into RSA, let's establish the fundamental mathematical building blocks.

Prime Numbers

A prime number is a natural number greater than 1 that has exactly two distinct positive divisors: 1 and itself.

Examples:

1. 5 is prime because its only factors are 1 and 5

2. 17 is prime because it cannot be divided evenly by any number except 1 and 17

Note: The number 1 is not considered prime because it has only one factor (itself).

Coprime Numbers

Two integers a and b are coprime (or relatively prime) if their greatest common divisor equals 1:

gcd(a, b) = 1

This means they share no common positive factors other than 1.

Examples:

1. (8, 15) are coprime because:
     Factors of 8:  {1, 2, 4, 8}
     Factors of 15: {1, 3, 5, 15}
     Common factors: {1} only

2. (8, 12) are NOT coprime because they share factors 2 and 4 besides 1

Division and Modular Arithmetic

Understanding Division with Remainders

When we divide one integer by another, we can express the relationship using the division algorithm:

Where:

• B is the dividend (number being divided)

• A is the divisor

• q is the quotient (how many times A goes into B)

• r is the remainder (what's left over)

Important constraint: 0 ≤ r < A (the remainder is always less than the divisor)

Examples:

1. A = 4, B= 12 : We get 12 = 3 × 4 + 0, so q= 3, r = 0
2. A = 4, B= 13 : We get 13 = 3 × 4 + 1, so q= 3, r = 1

Modular Arithmetic

Modular arithmetic is the mathematics of remainders. When we divide B by A, we write: B mod A = r

By the division algorithm, there exist integers q and r such that:

Key Properties:

• The remainder ‘r’ is unique when 0 ≤ r < |A|

• We use the notation B ≡ C (mod A) meaning B and C are congruent modulo A

• This means B and C leave the same remainder when divided by A

• Congruence modulo A is an equivalence relation (reflexive, symmetric, transitive)

The Circular Nature of Modular Arithmetic

Modular arithmetic behaves like circular (clock) arithmetic: residues 0 to A− 1 sit on a cycle and operations wrap around when they reach A.

Figure 1: Modular arithmetic cycle for x mod 4, showing how numbers with the same remainder are grouped together

For example, if we consider x mod 4 where x > 0, we see a natural cycle:

• 1 mod 4 = 1, 5 mod 4 = 1, 9 mod 4 = 1, 13 mod 4 = 1

• 2 mod 4 = 2, 6 mod 4 = 2, 10 mod 4 = 2, 14 mod 4 = 2

• 3 mod 4 = 3, 7 mod 4 = 3, 11 mod 4 = 3, 15 mod 4 = 3

• 4 mod 4 = 0, 8 mod 4 = 0, 12 mod 4 = 0, 16 mod 4 = 0

Figure 2: Concentric circle representation showing how 8 mod 4 = 0, demonstrating the cyclical nature of modular arithmetic

These visual representations help us understand that modular arithmetic creates natural groupings or "equivalence classes" of numbers that share the same remainder.

Cryptography Fundamentals

Cryptography is the science of protecting information by transforming it so that only authorized parties can access it.

Key Terms:

• Plaintext: The original, readable message

• Ciphertext: The encrypted, protected message

• Encryption: The process of converting plaintext to ciphertext

• Decryption: The process of recovering plaintext from ciphertext

Building Up to RSA: Simple Cipher Examples

Additive Cipher (Caesar Cipher)

The Caesar cipher shifts each letter by a fixed number of positions in the alphabet using modular arithmetic.

Encryption Formula:

C = (P − 65 + k) mod 26 + 65

Where:

• P = ASCII value of plaintext letter

• C = ASCII value of ciphertext letter

• k = shift key (0− 25)

Decryption Using Additive Inverse

To decrypt, we need the additive inverse of the key k in mod 26 arithmetic.

By definition, the additive inverse of k is the number -k such that:

k + (-k) ≡ 0 (mod 26)

Practically, this means:

additive inverse of k mod 26 = (−k) mod 26

General formal for finding additive inverse of k mod n is
(−k) mod n = ( n − (k mod n) ) mod n;

(-k) mod 26 = (26 - (17 mod 26 ) mod 26;
(-k) mod 26 = (26 - 17) mod 26 = 9 mod 26;

∴ additive inverse of 17 mod 26 is 9 mod 26

Decryption Formula:
P = ( (C - 65) + 9 ) mod 26 + 65; 

getting the plain text from above cipher values is left as an exercise to the reader.

The Concept of Modular Inverses

The "walk forward until you return home" principle applies to different types of operations:

Multiplicative Inverse

The multiplicative inverse of modulo n is a number a^-1 such that:

a × a−1 ≡ 1 (mod n)

Example: In mod 7 , we have 3 × 5 = 15 ≡ 1 (mod 7), so 5 is the multiplicative inverse of 3.

Exponential Inverse

In RSA, we use the fact that raising to some power e can be "undone" by raising to another power d, provided:

e × d ≡ 1 (mod φ(n))

Fermat's Little Theorem: The Foundation for RSA

Fermat's Little Theorem states that if p is prime and a is not divisible by p, then:

a^p−1 ≡ 1 (mod p)

Euler's Theorem (generalization): If gcd(a, n) = 1, then:

aφ(n) ≡ 1 (mod n)

Where φ(n) is Euler's totient function, counting how many numbers ≤ n are coprime to n.

Key Formulas:

• For prime p: φ(p) = p− 1

• For product of two primes: φ(pq) = (p− 1)(q− 1)

• The generalised formula for the total of Euler’s totient function for any positive integer is:

  Where p1, p2, …,pk are the distinct prime factors of

Example: For n = 10 = 2 × 5 :

The numbers 1, 3, 7, 9 are exactly the four integers between 1 and 10 that are coprime to 10.

RSA Cryptosystem: A Complete Walkthrough

Now let's see how all these mathematical concepts come together in RSA:

The security of RSA relies on the difficulty of factoring n back into its prime components p and q.

Why This Matters: φ(n) counts how many numbers from 1 to n are coprime with n. This creates the mathematical space where our encryption/decryption exponents will operate.

RSA String Encryption Demo, Pick two distinct primes from this set:
11 13 17 19 23 29 31 37 41 43 47 53

Step-by-Step RSA Implementation, Let's work through RSA using p = 13 and  q = 17:

Step 1: Build modulus n = p × q;  n = p × q = 13 × 17 = 221
Step 2: Euler's Totient φ(n) = (p-1)(q-1)
        φ(n) = (13-1)(17-1) = 12 × 16 = 192
Step 3: Choose public exponent e with gcd(e, φ(n)) = 1
        Count of valid public exponents e in [2, φ(n)-1]:  
        φ(n)=(p−1)(q−1)=12⋅16=192; 
        φ( φ(n) ) = φ(192) = 64; 
        Some valid e values: 5 7 11 13 17 19 23 25 29 31 35 37

        Selected: e = 5
Step 4: Compute private exponent d = e⁻¹ (mod φ(n))
        d is the modular inverse of e modulo φ(n)

        e × d ≡ 1 (mod φ(n)) → 5 × 77 ≡ 1 (mod 192)
        Therefore: d = 77

Public Key  : (e = 5, n = 221)
Private Key : (d = 77, n = 221)

Encryption and Decryption Demo

Now let's encrypt the message "HELLO":

Demo: Encrypt/Decrypt a string message

Mathematical Verification

Encryption Formula:

C = P^e mod n = P⁵ mod 221

• H (72): 72⁵ mod 221 = 89 ✓

• E (69): 69⁵ mod 221 = 205✓

• L (76): 76⁵ mod 221 = 111✓

• O (79): 79⁵ mod 221 = 27 ✓

Decryption Formula:

P= C^d mod n = C⁷⁷ mod 221

• 89⁷⁷ mod 221 = 72 (H) ✓

• 205⁷⁷ mod 221 = 69 (E) ✓

• 111⁷⁷ mod 221 = 76 (L) ✓

• 27⁷⁷ mod 221 = 79 (O) ✓

Why RSA Decryption Works

The mathematical elegance of RSA lies in Euler's theorem. Since we choose e and d such that:

e × d ≡ 1 (mod φ(n))

This means e × d= 1 + k × φ(n) for some integer k.

Therefore: (P^e)^d = P^ed = P^1+kφ(n) = P × (P^φ(n))k

By Euler's theorem, if gcd(P , n) = 1, then P φ(n) ≡ 1 (mod n).

Thus:

P × (1)k ≡ P (mod n)

This guarantees that encryption followed by decryption recovers the original message.

Additional Mathematical Insights

φ(n) = 192 factors into: 2⁶ × 3¹
φ(φ(n)) = φ(192) = 64 = 192 × ∏(1 - 1/p) over its prime factors p

The factorization reveals that there are 64 valid choices for the public exponent e.

RSA Security, The Hard Problem

RSA's security relies on the integer factorization problem: given a large composite number n = p × q , it is computationally infeasible to find p and q when they are large primes (typically hundreds of digits long).

Why this matters:

• Anyone can see the public key (n, e)

• To decrypt without the private key d, one would need to factor n to find p and q

• With p and q, one could compute φ(n) and then find d

• Current factoring algorithms cannot handle sufficiently large n in reasonable time

From Toy Example to Real World

In this demonstration, n = 221 can be factored easily. But with real RSA:

• Key sizes are typically 2048 bits or larger

• Prime numbers p and q are hundreds of digits long

• Factoring such large n is computationally infeasible with current technology

RSA’s effective security is much less than its key size for example, 1024 ≈ 80 bits, 2048 bits RSA ≈ 112 bits, 3072 bits RSA ≈ 128 bits, and so on. Due to the mathematical structure and patterns within RSA keys, as well as the efficiency of integer factorization algorithms. we shall discuss on that in another article, that also covers Attack Algorithms, Symmetric Ciphers like AES and more.

Conclusion

RSA cryptography demonstrates the beautiful intersection of pure mathematics and practical computer science. Starting from elementary concepts like prime numbers and modular arithmetic, we've built up to understanding one of the most important cryptographic systems in use today.

Key insights:

• Mathematical Foundation: Prime numbers and modular arithmetic provide the building blocks

• Elegant Design: Fermat's Little Theorem and Euler's theorem enable the encryption/decryption process

• Practical Security: The difficulty of factoring large numbers protects real-world communications

• Asymmetric Nature: Public and private keys enable secure communication without prior key sharing

This mathematical exploration illustrates how abstract mathematical concepts can have profound practical applications, protecting everything from online banking to private messaging in our digital world. The elegant interplay between number theory and

cryptographic security continues to be one of the most beautiful examples of applied mathematics in computer science.

If you want to understand more about practical applications using openssl or libsodium you can reach out to us at Prabodh.

References and Further Reading

Introduction to Modern Cryptography by Katz and Lindell

A Course in Number Theory and Cryptography by Neal Koblitz

Khan Academy's course on modular arithmetic

The original RSA paper: "A Method for Obtaining Digital Signatures and Public-Key Cryptosystems" (1978)

What Is Yoodli?

At its core, Yoodli is a personal AI speech coach that delivers private, real-time feedback on your communication. Whether you’re preparing for a keynote, a sales pitch, or a tough feedback session, it gives you the kind of insights usually reserved for professional coaches—only here, it’s always available and tailored to you.

Yoodli's Core Modes of Practice

Yoodli offers multiple ways to practice and grow, depending on your needs:

• Pitch/Presentation Mode – Record your talk, review detailed feedback, and even practice with AI-generated follow-up questions.

• Interview Mode – Choose a job role, set your interviewer’s demeanor, and experience dynamic Q&A practice.

• Roleplay Mode – Rehearse crucial conversations—like asking for a raise or handling conflict—with AI stepping into the other role.

• Video Call Coaching – Yoodli can join live Zoom, Teams, or Google Meet calls, offering subtle nudges such as “slow down” or “avoid filler words.” While it takes some getting used to during deep discussions, it can dramatically improve live performance.

• Desktop App Feedback – On Windows or macOS, record conversations and receive instant, private coaching.

What Makes Yoodli Stand Out?

Real-Time, Judgment-Free Feedback

Think of Yoodli as a smart mirror for communication. It transcribes your speech and provides instant analytics on filler words, pacing, clarity, and tone—without criticism, just data-driven guidance.

Focused on Both Content and Delivery

Most tools flag tone or speed, but Yoodli goes further—helping you refine what you say and how you say it. From rephrasing unclear ideas to sharpening delivery, it covers the full spectrum of effective communication.

Realistic Roleplay Scenarios

Instead of rehearsing alone, you engage with an AI that reacts, questions, and even challenges you—simulating real dialogue in a risk-free environment.

Personalized Progress Tracking

Over time, Yoodli tracks your growth: filler word reduction, pacing improvements, clarity gains, and confidence trends. You don’t just feel progress—you see it.

Sample Scenarios Where Yoodli Shines

• Public Speaking: Record a TED-style talk and refine both substance and style.

• Crucial Conversations: Practice negotiating a raise, addressing conflict, or giving feedback in a safe environment.

• Sales & Business: Sharpen your pitch and delivery before you walk into the real deal.

✨ Takeaway

We’re entering an era where AI isn’t just crunching numbers—it’s helping us become better humans in conversation. With the right feedback loop, practice isn’t just for musicians or athletes. You can practice your words, your tone, your confidence—and show up as the best version of yourself.

At Prabodh, we don’t just design engaging workshops—we strive to make you more successful by discovering and sharing the tools that give you an edge.

👉 Curious to see how Yoodli works? Try it out here and start transforming the way you communicate.

When React introduced Hooks in 2019, it changed the way we thought about building components. Suddenly, we could manage state and side effects in functional components without juggling class lifecycle methods. Hooks like useState and useEffect became the bread and butter of modern React development.

But as applications grow, developers are bumping into the limits of Hooks: unnecessary re-renders, complicated dependency arrays, and performance bottlenecks in fine-grained updates.

This is where Signals come in. Signals don’t replace Hooks—they complement them—and offer a fresh approach to reactivity that’s already gaining traction in frameworks like SolidJS, Angular, and even experiments in React’s ecosystem.

A Quick Recap: React Hooks

Here’s the classic way we handle state with Hooks:

import { useState } from "react";

function Counter() {

  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Count is {count}
    </button>
  );
}

This works beautifully. But if this count state was passed deep into multiple child components, React would need to re-render all of them whenever count changes—even if they don’t directly use it.

What Are Signals?

A Signal is a special kind of state container.
Think of it like a box that holds a value, and whenever the value changes, only the places that use it update—no unnecessary re-renders.

Here’s the same counter implemented with Signals (example using @preact/signals-react):

import { signal } from "@preact/signals-react";

const count = signal(0);
function Counter() {

  return (
    <button onClick={() => count.value++}>
      Count is {count.value}
    </button>
  );
}

Notice a few things:

• No useState.

• No re-rendering the entire component tree.

• Only the parts of the UI that directly read count.value update.

Why Signals Complement Hooks

Instead of replacing Hooks, Signals solve some of their shortcomings:

1. Fine-grained reactivity

• Hooks: Changing state re-renders the whole component.

• Signals: Only the elements that read the signal update.

2. No dependency arrays

• With useEffect, we manually track dependencies:

useEffect(() => {
  fetchData(query);
}, [query]);

• With Signals, the system knows what depends on what, so no arrays are needed.

3. Global state without Context

• Instead of setting up a React Context and a provider, a signal can be imported and shared anywhere:

export const user = signal(null);

Any component reading user.value will automatically update when it changes.

Signals + Hooks in Practice

The sweet spot is using both together.

For example, keep Hooks for local component state, and Signals for global/shared reactive data:

import { signal } from "@preact/signals-react";
import { useState } from "react";

const theme = signal("light");
function Toolbar() {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setOpen(!open)}>Menu</button>
      <button onClick={() => theme.value = theme.value === "light" ? "dark" : "light"}>
        Toggle Theme
      </button>

      <p>Theme is: {theme.value}</p>
    </div>

  );

}

• open (local UI toggle) works great with useState.

• theme (shared across the app) is better suited for a Signal.

The Road Ahead

React’s own team is experimenting with concepts like React Forget (a compiler that could make Hooks behave more like Signals under the hood). Meanwhile, libraries like @preact/signals-react are giving us a glimpse of the future.

If Hooks gave us a declarative way to manage state, Signals give us a more efficient and predictable reactivity model. Together, they create a developer experience that’s both powerful and ergonomic.

✨ Closing Thoughts

Hooks aren’t going anywhere. They’re still the foundation of React apps. But Signals add a new layer:

• Fewer re-renders

• Cleaner reactive code

• A simpler way to manage shared state

Think of Hooks as the engine, and Signals as a turbocharger.

The next time you find yourself struggling with complex useEffect dependencies or heavy global state management, give Signals a try—you may find they make your React codebase feel lighter and faster.