🌊 Rheo

Ultra-fast reactive state, SWR in-memory caching, request deduplication & optimistic data-flow micro-framework.

Zero dependencies • Under 8 KB bundle • Framework-agnostic • Native Angular Signals support

---

⚡ What is Rheo?

Named after the Greek ῥέω (to flow), Rheo is a high-performance data and state synchronization engine. It solves the most common performance bottlenecks in complex applications:

• Zero-latency reads (0 ms): In-memory Stale-While-Revalidate (SWR) cache.
• Request deduplication: 10 simultaneous requests for the same resource produce exactly 1 network call.
• Atomic state mesh: Lightweight reactive cells that notify only components that depend on changed data without zone.js or heavy tree re-renders.
• Optimistic UI with auto-rollback: Updates the interface in 0 ms; if the server fails, it seamlessly rolls back to the exact previous state.
• Angular Signals & Ionic ready: Interoperable out-of-the-box with Angular 17+ Signals, React hooks, Vue, and Vanilla JS.

---

📦 Installation

npm install rheo-js

---

🚀 Quickstart

1. In-Memory SWR (Stale-While-Revalidate)

import { useSWR } from 'rheo-js';

// Serves instantly from RAM (0 ms) while revalidating silently in background
const workflow = useSWR('workflow:101', async () => {
  const res = await fetch('/api/v1/workflow/101');
  return res.json();
});

console.log(workflow.get().data); // Cached data available immediately!

2. Request Deduplication (Prevent "Chatty API")

import { RheoDeduplicator } from 'rheo-js';

const dedupe = new RheoDeduplicator();

// If 5 components request the exact same workflow simultaneously:
const [c1, c2, c3, c4, c5] = await Promise.all([
  dedupe.dedupe('workflow:101', () => fetchWorkflow(101)),
  dedupe.dedupe('workflow:101', () => fetchWorkflow(101)),
  dedupe.dedupe('workflow:101', () => fetchWorkflow(101)),
  dedupe.dedupe('workflow:101', () => fetchWorkflow(101)),
  dedupe.dedupe('workflow:101', () => fetchWorkflow(101)),
]);
// ⚡ Exact same data delivered to all 5, with only 1 physical network call!

3. Optimistic Mutations with Auto-Rollback

import { cell, optimisticMutate } from 'rheo-js';

const task = cell({ id: 1, title: 'Revisar contrato', status: 'PENDIENTE' });

// UI updates in 0 ms!
await optimisticMutate(task, {
  optimisticData: prev => ({ ...prev!, status: 'APROBADO' }),
  mutation: async () => {
    return await api.post('/tasks/1/approve', {});
  },
  onError: (err) => {
    console.error('El servidor falló, estado revertido a PENDIENTE automáticamente.');
  }
});

4. Angular 17+ Signals Bridge

import { Component, signal } from '@angular/core';
import { cell, toSignal } from 'rheo-js';

const userCell = cell({ name: 'Carlos', role: 'Admin' });

@Component({
  template: `<h1>Hola {{ user().name }}</h1>`
})
export class UserProfileComponent {
  // Binds any Rheo reactive cell directly to an Angular Signal
  user = toSignal(userCell, signal);
}

---

📜 License

MIT © 2026