DEV Community: quojs

🚀 Quo.js v0.5.0 🚀 - Event-Driven Architecture and MIT License

quojs — Thu, 08 Jan 2026 21:55:23 +0000

After months of community feedback and real-world usage, we're excited to announce Quo.js v0.5.0, a major release that clarifies our architecture and removes adoption barriers.

Two key changes:

Event-bus terminology — API now reflects our event-driven architecture
MIT License — Removed enterprise adoption barriers

Let's dive into the technical details and rationale behind these decisions.

What is Quo.js?

Before we discuss what changed, let's clarify what Quo.js is:

Quo.js is an event-driven, async-first state container with atomic subscriptions.

It combines:

Event-driven architecture with channel-based routing
FIFO queue for predictable, serialized event processing
Atomic path subscriptions for zero unnecessary re-renders
Native async support via built-in middleware and effects

If Redux and Zustand had a baby that grew up studying event sourcing and CQRS, it would be Quo.js.

Part 1: From Dispatch to Emit — Why Terminology Matters

The Problem with "Dispatch"

When we launched Quo.js, we borrowed Redux's terminology: dispatch(), Action, ActionMap. This made sense—Redux is familiar, and the migration path seemed clear.

But as users adopted Quo.js, confusion emerged:

"Why do I await dispatch? Redux dispatch is synchronous."

"What's the difference between dispatch and emit?"

"Is this just Redux with extra steps?"

The truth: Quo.js isn't a flux dispatcher. It's an event-driven state container with a fundamentally different execution model.

Quo.js's Architecture: Event Bus + FIFO Queue

Let's look at what actually happens when you call store.emit():

// 1. Event is created with unique ID (deduplication)
const event = { 
  channel: 'todos', 
  type: 'add', 
  payload: todo,
  id: Symbol() 
};

// 2. Event is enqueued in FIFO queue
this.eventQueue.push(event);

// 3. If queue is processing, return (backpressure)
if (this.isProcessingQueue) return;

// 4. Drain queue sequentially
while (this.eventQueue.length) {
  const event = this.eventQueue.shift();

  // 5. Run async middleware pipeline
  for (const mw of this.middleware) {
    const ok = await mw(state, event, emit);
    if (!ok) break; // Middleware can cancel
  }

  // 6. Apply reducers (synchronous)
  this.reducerBus.emit(event.channel, event.type, event.payload);

  // 7. Run async effects
  await this.notifyEffects(event);

  // 8. Notify subscribers (if state changed)
  if (stateChanged) {
    this.listeners.forEach(l => l());
  }
}

This is not dispatch. This is event emission through a queue with:

Async pipeline
Event deduplication
Serialized processing
Built-in backpressure

The word "dispatch" implies synchronous, immediate execution. Quo.js does neither.

Enter: Event-Bus Terminology

In v0.5.0, we've adopted terminology that reflects reality:

Old (v0.4.x)	New (v0.5.0)	Reason
`dispatch()`	`emit()`	Events are emitted, not dispatched
`Action`	`Event`	We emit events, not actions
`ActionMap`	`EventMap`	Maps channels to event types
`action.event`	`event.type`	Clearer: "the event's type"

Code example:

// BEFORE (v0.4.x) ❌
store.dispatch('analytics', 'track', { page: '/home' });

const reducer = (state, action) => {
  if (action.event === 'track') {
    // ...
  }
};

// AFTER (v0.5.0) ✅
store.emit('analytics', 'track', { page: '/home' });

const reducer = (state, event) => {
  if (event.type === 'track') {
    // ...
  }
};

The new terminology instantly communicates:

Events flow through the system (event sourcing)
Channels organize events (pub/sub model)
Emit suggests async, queued processing

Migration Path: Deprecation, Not Deletion

We understand changing terminology is disruptive. That's why we've taken a gradual deprecation approach:

✅ Old APIs still work (with dev warnings)

✅ Type aliases provided (Action = Event)

✅ Clear timeline (removal in v1.0.0)

✅ Comprehensive migration guide

// This still works in v0.5.0 (with warning):
store.dispatch('todos', 'add', todo);

// Console (development only):
// [@quojs/core] `store.dispatch()` is deprecated. 
// Use `store.emit()` instead. Will be removed in v1.0.0.

Only one true breaking change: action.event → event.type

We couldn't alias this one because it would break TypeScript inference. But the fix is straightforward:

// Find and replace in your reducers:
// action.event → event.type

Why This Matters

Terminology isn't just semantics—it shapes mental models.

When you see store.emit('analytics', 'track', data), you immediately understand:

This is asynchronous (like emitting an event)
It's fire-and-forget (queue handles it)
It's event-driven (not command-driven like Redux)

This alignment between naming and behavior reduces cognitive load and makes Quo.js easier to understand, especially for developers coming from event-driven systems (Kafka, RabbitMQ, EventEmitter).

Part 2: From MPL-2.0 to MIT — Removing Adoption Barriers

The License Problem We Didn't See Coming

When we launched Quo.js, we chose Mozilla Public License 2.0 (MPL-2.0) for good reasons:

File-level copyleft (modifications stay open)
Patent protection clauses
Permissive for most use cases

We thought: "MPL-2.0 is permissive! Libraries like Firefox use it!"

Reality check: Enterprise legal departments don't care about nuance.

Over the past months, we heard from multiple teams:

"Our legal team won't approve MPL-2.0. Can you switch to MIT?"

"We can't use Quo.js until the license changes."

"Adding to our project requires a legal review—3-6 weeks minimum."

The pattern was clear: MPL-2.0 was silently killing adoption.

Why Enterprises Fear MPL-2.0

It's not that MPL-2.0 is restrictive—it's unfamiliar:

Whitelist policies: Most companies have "MIT/Apache/BSD-only" policies
Legal bandwidth: Non-standard licenses require review (slow, expensive)
Risk aversion: Lawyers say "no" to unknowns by default
Contributor concerns: Open-source contributors prefer MIT for portfolios

Meanwhile, every major JavaScript library uses MIT:

React, Vue, Angular → MIT
Redux, Zustand, Jotai, MobX → MIT
Express, Fastify, Next.js → MIT

We were the outlier.

The Decision: MIT

After consulting with the community, contributors, and users, we made the switch:

Quo.js v0.5.0 is MIT licensed.

What We Gain

✅ Instant enterprise approval — No legal review needed

✅ Community trust — Industry-standard terms everyone knows

✅ Contributor friendliness — MIT is the default for OSS portfolios

✅ Ecosystem alignment — Matches React, Redux, and every major library

What We Don't Lose

The license is more permissive, not less:

✅ Open-source commitment — Still 100% open

✅ Copyright ownership — Contributors still own their work

✅ Community governance — Unchanged

✅ Commercial use — Fully allowed (as before)

The only difference: Derivatives don't have to be open-source. But in practice, most Quo.js usage is integration (not forking), so this rarely matters.

A Note on Pragmatism

Some might see this as "selling out" to enterprise demands. We see it differently:

Open-source impact = adoption × value

If MPL-2.0 blocks 50% of potential users, we're cutting our impact in half. MIT maximizes reach without compromising values.

We're not a protocol (where copyleft matters). We're a library. Our success comes from widespread use, not forced contributions.

MIT is the pragmatic choice for maximum impact.

Part 3: What Didn't Change (And Why That's Good)

Amidst these changes, Quo.js's core value proposition remains exactly the same:

1. Atomic Subscriptions Still Eliminate Re-renders

// Only re-renders when THIS specific todo's title changes
const title = useAtomicProp({ 
  reducer: 'todos', 
  property: 'items.0.title' 
});

// Wildcard patterns for collections
const allTitles = useAtomicProp({
  reducer: 'todos',
  property: 'items.*.title'
});

This is still the killer feature. No other library offers this by default.

2. Async Pipeline Still Built-in

// Async middleware (no thunks needed)
const authMiddleware = async (state, event, emit) => {
  if (event.type === 'login') {
    const token = await authenticateUser(event.payload);
    await emit('auth', 'loginSuccess', { token });
    return false; // Cancel original event
  }
  return true;
};

// Async effects (no sagas needed)
const analyticsEffect = async (event, getState, emit) => {
  await trackEvent(event);
};

Async is first-class, not an afterthought.

3. TypeScript Inference Still Excellent

type AppEM = {
  todos: {
    add: { id: string; title: string };
    toggle: { id: string };
  };
};

// Full autocomplete:
await store.emit('todos', 'add', {
  id: '1',
  title: 'Buy milk'
});

// TypeScript catches errors:
await store.emit('todos', 'add', { id: 1 }); 
// ❌ Error: id must be string

Types are inferred, not manually specified.

4. Universal Runtime Still Supported

// Works everywhere:
import { createStore } from '@quojs/core';

// Browser, Node.js, Deno, Bun
const store = createStore({ /* ... */ });

Zero DOM dependencies. Use it in servers, CLI tools, microservices.

Performance: The Numbers Don't Lie

We keep mentioning "zero unnecessary re-renders." Let's prove it.

Benchmark: Todo App (50 items)

Same app. Same interactions. Different libraries.

Library	Re-renders (Toggling a TODO item)
Redux Toolkit	142
Quo.js	1

See it for yourself!

Why?

Redux/Zustand re-render every component subscribed to state.todos. Even if the change was to todos[49], components displaying todos[0] re-render.

Quo.js only re-renders components subscribed to the changed path:

// This component ONLY re-renders when items[0].title changes
function TodoItem() {
  const title = useAtomicProp({
    reducer: 'todos',
    property: 'items.0.title'
  });

  return <div>{title}</div>;
}

// Adding todos[50]? This component doesn't care.

Atomic subscriptions = free performance.

Migration Guide: Step-by-Step

Migrating from v0.4.x to v0.5.0 takes ~15 minutes for most codebases.

Step 1: Update Packages

npm install @quojs/core@0.5.0 @quojs/react@0.5.0

Step 2: Search and Replace

Use your IDE's find-and-replace:

dispatch → emit
- store.dispatch( → store.emit(
- useDispatch() → useEmit()
action → event
- action.event → event.type
- : Action → : Event (in type annotations)
ActionMap → EventMap
- type AppAM → type AppEM
- : ActionMap → : EventMap

Step 3: Test

Run your tests. The only breaking change is action.event → event.type, which TypeScript will catch.

Step 4: Remove Warnings

Check your dev console. You'll see deprecation warnings for any missed renames.

Fix them now—they'll be errors in v1.0.0.

Try It Today

Quick Start Guide.

Resources:

Community Feedback Welcome

We built Quo.js because we needed it—but we're shaping it based on your feedback.

What do you think of v0.5.0?

Does the event-bus terminology make sense?
Relieved about MIT?
What features do you need next?

Drop a comment below or join the discussion on GitHub.

Thank You

To everyone who:

Provided feedback on terminology
Shared concerns about MPL-2.0
Tested RC builds
Filed issues and PRs
Used Quo.js in production

Made in 🇲🇽, for the world.

— The Quo.js Team

P.S. If Quo.js helps you, give us a star on GitHub! ⭐

Comment j'ai arrêté de redessiner l'univers : une histoire d'abonnements atomiques dans React

quojs — Wed, 05 Nov 2025 23:11:00 +0000

Comment j'ai construit l'animation du logo Quo.js avec un moteur externe à React, des souscriptions atomiques dans React, et presque aucun code répétitif.

TL;DR : J'ai transformé un PNG statique du logo Quo.js en centaines de cercles SVG animés qui s'assemblent, se dispersent autour de la souris et reviennent en douceur — le tout en React 19 + TypeScript utilisant @quojs/core et @quojs/react. L'astuce consiste à exécuter un petit moteur complètement en dehors de React, en diffusant des mises à jour d'état groupées dans un store Quo.js, puis en effectuant le rendu avec des souscriptions atomiques dans React afin que l'interface utilisateur ne soit re-rendue que lorsque les coordonnées d'un cercle spécifique changent réellement.

Technologies : React 19, TypeScript, Vite, SVG

État : @quojs/core et @quojs/react

Ce qui n'est pas utilisé : three.js, WebGL, WebGPU. Ceci est du pur DOM/SVG + requestAnimationFrame.

Ce que vous verrez (GIFs)

Si vous visitez le site web de Quo.js, vous verrez ceci :

Intro : les particules convergent pour former le logo "Quo.js".

Et si vous jouez avec le curseur :

Interactivité : les cercles s'éloignent du curseur en orbite, puis reviennent à leur position "d'origine".

Dev.to pourrait compresser les fichiers GIF, si vous voyez des animations saccadées, envisagez de télécharger les fichiers GIF (intro et interaction) ou visitez le site web de Quo.js pour du 60fps fluide.

L'idée en un diagramme

Nous gardons React léger en déplaçant tout le travail d'animation dans un simple nano-moteur TypeScript. Le moteur possède la boucle de frames, le quadtree et les calculs de mouvement. Il envoie des mises à jour groupées à un store Quo.js. React ne consomme que la petite portion dont il a besoin par cercle via des sélecteurs atomiques.

Moteur (hors de React) : boucle requestAnimationFrame, limitation dt, lissage FPS, quadtree, physique des cercles.
Store Quo.js : réducteurs purement fonctionnels, effets pour les petits timings et événements de cycle de vie.
React : rend simplement les nœuds circle via useSliceProp('logo', 'd.circle_0') etc.

Pourquoi cette conception ? (Performance et simplicité)

React reste inactif sauf si nécessaire. Chaque composant <Circle> souscrit à son propre chemin x,y. Pas de re-rendus globaux. Pas de prop drilling.
Le moteur est agnostique du framework. Il ne connaît pas React. Il dispatche simplement des actions (batchUpdate) vers le store.
Moins de code répétitif que Redux/RTK. Quo.js utilise des channels + événements, des effets sans thunks/sagas, et des sélecteurs atomiques pour souscrire à des chemins pointés exacts.
Mises à jour groupées par frame + un réducteur serré maintiennent les écritures d'état minimales.
rAF + limitation dt + buffer circulaire FPS offrent un mouvement fluide sans accrocs.

Étape 1 – Modéliser l'état et les événements de canal

Nous gardons l'état logo pour l'animation.

export type Circle = { id: string; x: number; y: number; r?: number };
export type GroupedCircle = { group: "d" | "u" | "x" } & Circle;

export type LogoState = {
  enabled: boolean;
  fps: number;
  itemCount: { d: number; u: number; x: number };
  size: { height: number; width: number };
  d: Record<string, Circle>;
  u: Record<string, Circle>;
  x: Record<string, Circle>;
  intro: { remaining: number; total?: number; done: boolean };
};

export type LogoAM = {
  start: {};
  stop: {};
  fps: { fps: number };
  size: { height: number; width: number };
  count: { d: number; u: number; x: number };
  update: GroupedCircle;
  batchUpdate: { changes: GroupedCircle[] };
  introProgress: { remaining: number; total: number };
  introComplete: {};
};

Modèle de dispatch :

store.dispatch("logo", "batchUpdate", { changes: [...] });

Étape 2 – Le réducteur : immuable, rapide

import type { ActionPair, ReducerSpec } from "@quojs/core";
import type { AppAM, LogoAM, LogoState, Circle } from "../types";

export const LOGO_INITIAL_STATE: LogoState = {
  enabled: true,
  d: Object.create(null),
  u: Object.create(null),
  x: Object.create(null),
  fps: 0,
  itemCount: { d: 0, u: 0, x: 0 },
  size: { height: 0, width: 0 },
  intro: {
    remaining: 0,
    total: 0,
    done: false,
  },
};

const LOGO_ACTIONS = [
  ["logo", "update"],
  ["logo", "stop"],
  ["logo", "fps"],
  ["logo", "size"],
  ["logo", "count"],
  ["logo", "batchUpdate"],
  ["logo", "introProgress"],
  ["logo", "introComplete"],
  ["logo", "start"],
] as const satisfies readonly ActionPair<AppAM>[];

// sucre syntaxique pour l'inférence de type
type GroupKey = keyof Pick<LogoState, "d" | "u" | "x">;

function upsertItem(state: LogoState, group: GroupKey, next: Circle): LogoState {
  const groupMap = state[group];
  const prev = groupMap[next.id];

  // insertion
  if (!prev) {
    const nextGroup = { ...groupMap, [next.id]: next };
    return { ...state, [group]: nextGroup };
  }

  // mise à jour uniquement si quelque chose a réellement changé
  if (
    prev.x === next.x &&
    prev.y === next.y
  ) {
    return state; // no-op
  }

  const nextGroup = { ...groupMap, [next.id]: { ...prev, ...next } };
  return { ...state, [group]: nextGroup };
}

export const logoReducer: ReducerSpec<LogoState, AppAM> = {
  actions: [
    ...LOGO_ACTIONS
  ],
  state: LOGO_INITIAL_STATE,
  reducer: (state, action) => {
    if (action.channel !== "logo") return state;
    if (!state.enabled && action.event !== "start") return state;

    switch (action.event) {
      case "update": {
        const { group, id, x, y } = action.payload;
        const next: Circle = { id, x, y };

        return upsertItem(state, group as GroupKey, next);
      }

      case "start": {
        if (state.enabled) return state;

        return {
          ...state,
          enabled: true,
        };
      }

      case "stop": {
        if (!state.enabled) return state;

        return {
          ...state,
          enabled: false
        };
      }

      case "fps": {
        const { fps } = action.payload as LogoAM["fps"];

        if (state.fps === fps) return state;

        return {
          ...state,
          fps,
        };
      }

      case "count": {
        const next = action.payload as LogoAM["count"];
        const prev = state.itemCount;

        if (prev.d === next.d && prev.u === next.u && prev.x === next.x) return state;

        return { ...state, itemCount: next };
      }

      case "size": {
        const { height, width } = action.payload as LogoAM["size"];
        const prev = state.size;

        if (prev.height === height && prev.width === width) return state;

        return {
          ...state, size: {
            height,
            width,
          }
        };
      }

      case "batchUpdate": {
        if (!action.payload.changes.length) return state;
        const { changes } = action.payload;

        let wroteAny = false;
        for (const c of changes) {
          let prev = state[c.group][c.id];

          if (!prev) {
            prev = {
              ...state[c.group][c.id],
              ...c,
            };

            state = {
              ...state,
              [c.group]: {
                ...state[c.group],
                [c.id]: prev,
              }
            };

            wroteAny = true;
            continue;
          }

          const nx = c.x ?? prev.x;
          const ny = c.y ?? prev.y;

          if (nx !== prev.x || ny !== prev.y) {
            state = {
              ...state,
              [c.group]: {
                ...state[c.group],
                [c.id]: { ...prev, x: nx, y: ny },
              }
            };

            wroteAny = true;
          }
        }

        return wroteAny ? { ...state } : state;
      }

      case "introProgress": {
        const { remaining, total } = action.payload;

        return {
          ...state,
          intro: {
            ...state.intro,
            remaining,
            total,
          }
        };
      }

      case "introComplete": {
        return {
          ...state,
          intro: {
            ...(state.intro ?? {}),
            remaining: 0,
            done: true
          }
        };
      }

      default:
        return state;
    }
  },
};

Éviter les écritures si x,y inchangés.
Grouper plusieurs mises à jour par frame.
Toucher uniquement les clés modifiées.

Étape 3 – Créer le store

export const store = createStore({
  name: "Quo.js",
  reducer: { logo: logoReducer },
  effects: [],
});

Étape 4 – Le moteur (hors de React)

Exécute la boucle rAF.
Calcule dt et FPS.
Dispatche logo/batchUpdate.
Souscrit aux effets du store pour start/stop.
N'importe jamais React.

if (dt > 0) this.simulation.loop(this._dt, now);
if (this._running && gen === this._rafGen) {
  this._handle = requestAnimationFrame((t) => this._tick(t, gen));
}

Chaque cercle émet des mises à jour { group, id, x, y } lorsqu'il se déplace.

Étape 5 – Relier le moteur et le store dans React

useEffect(() => {
  const engine = new Engine({ targetFPS: 60, autoStart: false }, store);
  const setup = async () => {
    const image = await loadImagePixels(quoLogo);
    const { specs, width, height, groupCounts } = extractCircleSpecsFromImage(
      image,
      { spacing: 3, initialR: 0.5, maxCircles: 1500 }
    );

    store.dispatch("logo", "size", { height, width });
    store.dispatch("logo", "count", groupCounts);

    const sim = new Simulation(engine, { items: specs, name: "Quo Packing" });

    engine.attach(sim);
    engine.init();
    engine.start();
  };

  setup();
  return () => engine.teardown();
}, [store]);

Attendez, manu—comment transformons-nous un PNG en un essaim de cercles ?

Sous le capot, extractCircleSpecsFromImage charge le PNG du logo dans un canvas hors écran, échantillonne l'alpha des pixels sur une grille configurable (par défaut : espacement de 8px), et émet une spécification de cercle partout où alpha > 50.

const threshold = 0.2; // 0–1, ajustez pour la densité
const spacing = 8;

for (let y = 0; y < h; y += spacing) {
  for (let x = 0; x < w; x += spacing) {
    const alpha = ctx.getImageData(x, y, 1, 1).data[3] / 255;
    if (alpha > threshold) {
      circles.push({ x, y, r: spacing * 0.45 });
    }
  }
}

Vous voulez un essaim plus dense ? Réduisez l'espacement. Vous voulez un éclairage d'ambiance ? Mappez alpha → rayon. Ce ne sont que des données—hackez à volonté.

Étape 6 – Colle React avec @quojs/react

export const { useStore, useDispatch, useSliceProp } =
  createQuoHooks(AppStoreContext);

Maintenant chaque <Circle> souscrit atomiquement :

export const Circle = ({ id, group }) => {
  const path = `${group}.${id}`;

  const { x, y } = useSliceProp({
    reducer: "logo",
    property: path,
  }) ?? { x: 0, y: 0 };

  return <circle className={`group-${group}`} cx={`${x}px`} cy={`${y}px`} />;
};

Seul ce cercle est re-rendu lorsque ses propres coordonnées changent.

Récapitulatif du flux de données

FAQ / Notes

Pourquoi pas RTK ? Besoin d'un modèle channel/event, effets async, souscriptions atomiques.
Pourquoi pas three.js/WebGL ? Excessif pour des particules 2D ; SVG + Quo.js est léger.
Complétion de l'intro ? La simulation suit les cercles restants → dispatche introProgress → introComplete.
FPS ? Moyenné via buffer circulaire, dispatché avec parcimonie.

Pourquoi des dispatchs parcimonieux, pas du spam par frame ?
Inonder React de 60 mises à jour d'état/sec est un big-bang de rendu. Au lieu de cela, le moteur utilise un buffer circulaire pour suivre les temps de frame, calculant le FPS uniquement lorsque le buffer boucle (~toutes les 30 frames).

if (this.frameCount % 30 === 0) {
  const fps = 30 / (deltaSum / 1000);
  this.store.dispatch(setFps(fps));
}

Résultat ? Une mise à jour atomique toutes les ~500ms, zéro saccade, et Redux Devtools reste sain d'esprit. —oui, vous avez bien lu : Quo.js supporte Redux Devtools—. La télémétrie de performance doit servir l'animation—pas la priver.

Reproduire localement

pnpm add @quojs/core@0.2.0 @quojs/react@0.2.0

Créer le store (voir Étape 3).
Envelopper <AppStoreContext.Provider value={store}>.
Monter le moteur (Étape 5).
Rendre les cercles SVG (Étape 6).

Documentation pour Quo.js et compagnie :

Core
React

Petits mais importants patterns

Écriture groupée par frame.
Protection no-op sur valeurs identiques.
Souscriptions à chemin exact.
Protection des tokens de génération rAF.
Dispatch parcimonieux de télémétrie.

Essayez-le !

Réflexions finales

Cette animation montre comment React peut être un moteur de rendu, pas une boucle de jeu. Avec la gestion de changements d'état précis et granulaires, vous obtenez un FPS élevé, peu d'agitation React, et une logique maintenable.

Une note rapide sur les noms des hooks pour useSliceProp et useSliceProps : Ceux-ci vont probablement changer pour quelque chose de plus significatif comme useAtomicProp et useAtomicProps avant la prochaine version (dans une semaine), alors ne les utilisez pas encore en production. Quo.js est toujours en phase de tests bêta.

Bon codage, manu.

Licence : MPL-2.0 — partagez avec le monde.

Como parei de re-renderizar o universo: Uma história de assinaturas atômicas no React

quojs — Wed, 05 Nov 2025 21:30:46 +0000

Como construí a animação do logo do Quo.js com um Engine fora do React, assinaturas atômicas dentro do React, e quase zero boilerplate.

TL;DR: Transformei um PNG estático do logo do Quo.js em centenas de círculos SVG animados que se montam, se dispersam ao redor do mouse, e deslizam de volta para casa — tudo em React 19 + TypeScript usando @quojs/core e @quojs/react. O truque é rodar um pequeno Engine completamente fora do React, transmitir atualizações de estado em lotes para uma store do Quo.js, e então renderizar com assinaturas atômicas no React para que a UI só re-renderize quando as coordenadas de um círculo específico realmente mudem.

Tech: React 19, TypeScript, Vite, SVG

State: @quojs/core e @quojs/react

O que NÃO é usado: three.js, WebGL, WebGPU. Isso é puro DOM/SVG + requestAnimationFrame.

O que você verá (GIFs)

Se você visitar o site do Quo.js, verá isto:

Intro: partículas convergem para a marca do logo "Quo.js".

E se você brincar com o cursor:

Interatividade: círculos orbitam para longe do cursor, então relaxam de volta para "casa".

Dev.to pode comprimir os arquivos GIF, se você vir animações lentas, considere baixar os arquivos GIF (intro e interação) ou visitar Quo.js site para 60fps suaves.

A ideia em um diagrama

Mantemos o React leve empurrando todo o trabalho de animação para um nano-Engine simples e plano de TypeScript. O Engine possui o loop de frames, quadtree e matemática de movimento. Ele envia atualizações em lotes para uma Store do Quo.js. O React consome apenas o pequeno pedaço que precisa por círculo via seletores atômicos.

Engine (fora do React): loop requestAnimationFrame, clamp de dt, suavização de FPS, quadtree, física de círculos.
Store Quo.js: reducers puramente funcionais, efeitos para pequenos temporizadores e eventos de ciclo de vida.
React: apenas renderiza nós de círculo via useSliceProp('logo', 'd.circle_0') etc.

Por que esse design? (Performance e simplicidade)

React fica ocioso a menos que seja necessário. Cada componente <Circle> se inscreve em seu próprio caminho x,y. Sem re-renders globais. Sem prop drilling.
Engine é agnóstico de framework. Ele não sabe sobre React. Apenas despacha ações (batchUpdate) para a store.
Menos boilerplate que Redux/RTK. Quo.js usa canais + eventos, efeitos sem thunks/sagas, e seletores atômicos para se inscrever em caminhos exatos com notação de pontos.
Atualizações em lotes por frame + um reducer compacto mantêm as escritas de estado mínimas.
rAF + clamp de dt + buffer circular de FPS dão movimento suave sem engasgos.

Passo 1 – Modelar o estado e eventos de canal

Mantemos o estado logo para a animação.

export type Circle = { id: string; x: number; y: number; r?: number };
export type GroupedCircle = { group: "d" | "u" | "x" } & Circle;

export type LogoState = {
  enabled: boolean;
  fps: number;
  itemCount: { d: number; u: number; x: number };
  size: { height: number; width: number };
  d: Record<string, Circle>;
  u: Record<string, Circle>;
  x: Record<string, Circle>;
  intro: { remaining: number; total?: number; done: boolean };
};

export type LogoAM = {
  start: {};
  stop: {};
  fps: { fps: number };
  size: { height: number; width: number };
  count: { d: number; u: number; x: number };
  update: GroupedCircle;
  batchUpdate: { changes: GroupedCircle[] };
  introProgress: { remaining: number; total: number };
  introComplete: {};
};

Padrão de dispatch:

store.dispatch("logo", "batchUpdate", { changes: [...] });

Passo 2 – O reducer: imutável, rápido

import type { ActionPair, ReducerSpec } from "@quojs/core";
import type { AppAM, LogoAM, LogoState, Circle } from "../types";

export const LOGO_INITIAL_STATE: LogoState = {
  enabled: true,
  d: Object.create(null),
  u: Object.create(null),
  x: Object.create(null),
  fps: 0,
  itemCount: { d: 0, u: 0, x: 0 },
  size: { height: 0, width: 0 },
  intro: {
    remaining: 0,
    total: 0,
    done: false,
  },
};

const LOGO_ACTIONS = [
  ["logo", "update"],
  ["logo", "stop"],
  ["logo", "fps"],
  ["logo", "size"],
  ["logo", "count"],
  ["logo", "batchUpdate"],
  ["logo", "introProgress"],
  ["logo", "introComplete"],
  ["logo", "start"],
] as const satisfies readonly ActionPair<AppAM>[];

// açúcar para inferência de tipos
type GroupKey = keyof Pick<LogoState, "d" | "u" | "x">;

function upsertItem(state: LogoState, group: GroupKey, next: Circle): LogoState {
  const groupMap = state[group];
  const prev = groupMap[next.id];

  // inserir
  if (!prev) {
    const nextGroup = { ...groupMap, [next.id]: next };
    return { ...state, [group]: nextGroup };
  }

  // atualizar apenas se algo realmente mudou
  if (
    prev.x === next.x &&
    prev.y === next.y
  ) {
    return state; // no-op
  }

  const nextGroup = { ...groupMap, [next.id]: { ...prev, ...next } };
  return { ...state, [group]: nextGroup };
}

export const logoReducer: ReducerSpec<LogoState, AppAM> = {
  actions: [
    ...LOGO_ACTIONS
  ],
  state: LOGO_INITIAL_STATE,
  reducer: (state, action) => {
    if (action.channel !== "logo") return state;
    if (!state.enabled && action.event !== "start") return state;

    switch (action.event) {
      case "update": {
        const { group, id, x, y } = action.payload;
        const next: Circle = { id, x, y };

        return upsertItem(state, group as GroupKey, next);
      }

      case "start": {
        if (state.enabled) return state;

        return {
          ...state,
          enabled: true,
        };
      }

      case "stop": {
        if (!state.enabled) return state;

        return {
          ...state,
          enabled: false
        };
      }

      case "fps": {
        const { fps } = action.payload as LogoAM["fps"];

        if (state.fps === fps) return state;

        return {
          ...state,
          fps,
        };
      }

      case "count": {
        const next = action.payload as LogoAM["count"];
        const prev = state.itemCount;

        if (prev.d === next.d && prev.u === next.u && prev.x === next.x) return state;

        return { ...state, itemCount: next };
      }

      case "size": {
        const { height, width } = action.payload as LogoAM["size"];
        const prev = state.size;

        if (prev.height === height && prev.width === width) return state;

        return {
          ...state, size: {
            height,
            width,
          }
        };
      }

      case "batchUpdate": {
        if (!action.payload.changes.length) return state;
        const { changes } = action.payload;

        let wroteAny = false;
        for (const c of changes) {
          let prev = state[c.group][c.id];

          if (!prev) {
            prev = {
              ...state[c.group][c.id],
              ...c,
            };

            state = {
              ...state,
              [c.group]: {
                ...state[c.group],
                [c.id]: prev,
              }
            };

            wroteAny = true;
            continue;
          }

          const nx = c.x ?? prev.x;
          const ny = c.y ?? prev.y;

          if (nx !== prev.x || ny !== prev.y) {
            state = {
              ...state,
              [c.group]: {
                ...state[c.group],
                [c.id]: { ...prev, x: nx, y: ny },
              }
            };

            wroteAny = true;
          }
        }

        return wroteAny ? { ...state } : state;
      }

      case "introProgress": {
        const { remaining, total } = action.payload;

        return {
          ...state,
          intro: {
            ...state.intro,
            remaining,
            total,
          }
        };
      }

      case "introComplete": {
        return {
          ...state,
          intro: {
            ...(state.intro ?? {}),
            remaining: 0,
            done: true
          }
        };
      }

      default:
        return state;
    }
  },
};

Evita escritas se x,y não mudaram.
Atualiza muitas mudanças em lote por frame.
Apenas toca as chaves modificadas.

Passo 3 – Criar a store

export const store = createStore({
  name: "Quo.js",
  reducer: { logo: logoReducer },
  effects: [],
});

Passo 4 – O Engine (fora do React)

Roda loop rAF.
Calcula dt e FPS.
Despacha logo/batchUpdate.
Se inscreve em efeitos da store para start/stop.
Nunca importa React.

if (dt > 0) this.simulation.loop(this._dt, now);
if (this._running && gen === this._rafGen) {
  this._handle = requestAnimationFrame((t) => this._tick(t, gen));
}

Cada Circle emite atualizações { group, id, x, y } quando se move.

Passo 5 – Conectar Engine e Store no React

useEffect(() => {
  const engine = new Engine({ targetFPS: 60, autoStart: false }, store);
  const setup = async () => {
    const image = await loadImagePixels(quoLogo);
    const { specs, width, height, groupCounts } = extractCircleSpecsFromImage(
      image,
      { spacing: 3, initialR: 0.5, maxCircles: 1500 }
    );

    store.dispatch("logo", "size", { height, width });
    store.dispatch("logo", "count", groupCounts);

    const sim = new Simulation(engine, { items: specs, name: "Quo Packing" });

    engine.attach(sim);
    engine.init();
    engine.start();
  };

  setup();
  return () => engine.teardown();
}, [store]);

Espera aí, manu—como transformamos um PNG em um enxame de círculos?

Por baixo dos panos, extractCircleSpecsFromImage carrega o PNG do logo em um canvas fora da tela, amostra o alpha de pixels em uma grade configurável (padrão: espaçamento de 8px), e emite uma especificação de círculo onde alpha > 50.

const threshold = 0.2; // 0–1, ajuste para densidade
const spacing = 8;

for (let y = 0; y < h; y += spacing) {
  for (let x = 0; x < w; x += spacing) {
    const alpha = ctx.getImageData(x, y, 1, 1).data[3] / 255;
    if (alpha > threshold) {
      circles.push({ x, y, r: spacing * 0.45 });
    }
  }
}

Quer um enxame mais denso? Diminua o espaçamento. Quer iluminação ambiente? Mapeie alpha → raio. É apenas dados—hackeie à vontade.

Passo 6 – Cola do React com @quojs/react

export const { useStore, useDispatch, useSliceProp } =
  createQuoHooks(AppStoreContext);

Agora cada <Circle> se inscreve atomicamente:

export const Circle = ({ id, group }) => {
  const path = `${group}.${id}`;

  const { x, y } = useSliceProp({
    reducer: "logo",
    property: path,
  }) ?? { x: 0, y: 0 };

  return <circle className={`group-${group}`} cx={`${x}px`} cy={`${y}px`} />;
};

Apenas esse círculo re-renderiza quando suas próprias coordenadas mudam.

Resumo do fluxo de dados

FAQ / Notas

Por que não RTK? Precisava do modelo de canal/evento, efeitos assíncronos, assinaturas atômicas.
Por que não three.js/WebGL? Exagero para partículas 2D; SVG + Quo.js é leve.
Conclusão da intro? A simulação rastreia círculos restantes → despacha introProgress → introComplete.
FPS? Média via buffer circular, despachado esparsamente.

Por que despachos esparsos, não spam por frame?

Inundar o React com 60 atualizações de estado/seg é um big-bang de renderização. Em vez disso, o Engine usa um buffer circular para rastrear tempos de frame, calculando FPS apenas quando o buffer completa (~a cada 30 frames).

if (this.frameCount % 30 === 0) {
  const fps = 30 / (deltaSum / 1000);
  this.store.dispatch(setFps(fps));
}

Resultado? Uma atualização atômica a cada ~500ms, zero jank, e Redux Devtools permanecem sãos. —sim, você leu certo: Quo.js suporta Redux Devtools—. Telemetria de performance deve servir a animação—não matá-la de fome.

Reproduzir localmente

pnpm add @quojs/core@0.2.0 @quojs/react@0.2.0

Criar store (ver Passo 3).
Envolver <AppStoreContext.Provider value={store}>.
Montar Engine (Passo 5).
Renderizar SVG Circles (Passo 6).

Docs para Quo.js e amigos:

Core
React

Padrões pequenos mas impactantes

Escritas em lotes por frame.
Guarda de no-op em valores idênticos.
Assinaturas a caminhos exatos.
Guarda de tokens de geração rAF.
Despacho esparso de telemetria.

Experimente!

⭐ Dê uma estrela ao Quo.js no GitHub

🧪 Experimente @quojs/core@0.2.0

🧪 Experimente @quojs/react@0.2.0

🐞 Registre issues / ideias

🧩 Contribua exemplos

Reflexões finais

Esta animação mostra como React pode ser um renderizador, não um loop de jogo. Lidando com mudanças de estado precisas e granulares, você obtém alto FPS, pouca agitação do React, e lógica mantível.

Uma nota rápida sobre os nomes dos hooks para useSliceProp e useSliceProps: Estes provavelmente mudarão para algo mais significativo como useAtomicProp e useAtomicProps antes do próximo lançamento (em uma semana), então não os use ainda em produção. Quo.js ainda está em testes beta.

Tenha um lindo coding, manu.

Licença: MPL-2.0 — compartilhe com o mundo.

How I stopped re-rendering the universe: A tale of atomic subscriptions in React

quojs — Wed, 05 Nov 2025 14:00:00 +0000

How I built the Quo.js logo animation with an Engine outside React, atomic subscriptions inside React, and almost zero boilerplate.

TL;DR: I turned a static PNG of Quo.js logo into hundreds of animated SVG circles that assemble, disperse around the mouse, and glide home — all in React 19 + TypeScript using @quojs/core@0.2.0 and @quojs/react@0.2.0. The trick is running a small Engine completely outside React, streaming batched state updates into a Quo.js store, and then rendering with atomic subscriptions in React so the UI only re-renders when a specific circle’s coordinates actually change.

Tech: React 19, TypeScript, Vite, SVG

State: @quojs/core@0.2.0 and [@quojs/react@0.2.0](https://github.com/quojs/quojs/blob/main/packages/react/README.md_**What’s not used**: three.js, WebGL, WebGPU. This is pure DOM/SVG + requestAnimationFrame.

What you’ll see (GIFs)

If you visit Quo.js' website, you will see this:

Intro: particles converge into the “Quo.js” logo mark.

And if you play with the cursor:

Interactivity: circles orbit away from the cursor, then relax back to “home.”

Dev.to might compress the GIF files, if you see sluggish animations, consider downloading the GIF files (intro and interaction) or visiting https://quojs.dev for buttery 60fps.

The idea in one diagram

We keep React lean by pushing all animation work into a plain, simple TypeScript nano-Engine. The Engine owns the frame loop, quadtree, and motion math. It sends batched updates to a Quo.js Store. React consumes only the tiny slice it needs per circle via atomic selectors.

Engine (outside React): requestAnimationFrame loop, dt clamp, FPS smoothing, quadtree, circle physics.
Quo.js Store: purely functional reducers, effects for small timings and lifecycle events.
React: just renders circle nodes via useSliceProp('logo', 'd.circle_0') etc.

Why this design? (Performance & simplicity)

React stays idle unless needed. Each <Circle> component subscribes to its own x,y path. No global re-renders. No prop drilling.
Engine is framework-agnostic. It doesn’t know about React. It just dispatches actions (batchUpdate) to the store.
Less boilerplate than Redux/RTK. Quo.js uses channels + events, effects without thunks/sagas, and atomic selectors to subscribe at exact dotted paths.
Batched updates per frame + a tight reducer keep state writes minimal.
rAF + dt clamp + FPS ring buffer give smooth motion without stutters.

Step 1 – Model the state and channel events

We keep state logo For the animation.

export type Circle = { id: string; x: number; y: number; r?: number };
export type GroupedCircle = { group: "d" | "u" | "x" } & Circle;

export type LogoState = {
  enabled: boolean;
  fps: number;
  itemCount: { d: number; u: number; x: number };
  size: { height: number; width: number };
  d: Record<string, Circle>;
  u: Record<string, Circle>;
  x: Record<string, Circle>;
  intro: { remaining: number; total?: number; done: boolean };
};

export type LogoAM = {
  start: {};
  stop: {};
  fps: { fps: number };
  size: { height: number; width: number };
  count: { d: number; u: number; x: number };
  update: GroupedCircle;
  batchUpdate: { changes: GroupedCircle[] };
  introProgress: { remaining: number; total: number };
  introComplete: {};
};

Dispatch pattern:

store.dispatch("logo", "batchUpdate", { changes: [...] });

Step 2 – The reducer: immutable, fast

import type { ActionPair, ReducerSpec } from "@quojs/core";
import type { AppAM, LogoAM, LogoState, Circle } from "../types";

export const LOGO_INITIAL_STATE: LogoState = {
  enabled: true,
  d: Object.create(null),
  u: Object.create(null),
  x: Object.create(null),
  fps: 0,
  itemCount: { d: 0, u: 0, x: 0 },
  size: { height: 0, width: 0 },
  intro: {
    remaining: 0,
    total: 0,
    done: false,
  },
};

const LOGO_ACTIONS = [
  ["logo", "update"],
  ["logo", "stop"],
  ["logo", "fps"],
  ["logo", "size"],
  ["logo", "count"],
  ["logo", "batchUpdate"],
  ["logo", "introProgress"],
  ["logo", "introComplete"],
  ["logo", "start"],
] as const satisfies readonly ActionPair<AppAM>[];

// suggar for type inference
type GroupKey = keyof Pick<LogoState, "d" | "u" | "x">;

function upsertItem(state: LogoState, group: GroupKey, next: Circle): LogoState {
  const groupMap = state[group];
  const prev = groupMap[next.id];

  // insert
  if (!prev) {
    const nextGroup = { ...groupMap, [next.id]: next };
    return { ...state, [group]: nextGroup };
  }

  // update only if something actually changed
  if (
    prev.x === next.x &&
    prev.y === next.y
  ) {
    return state; // no-op
  }

  const nextGroup = { ...groupMap, [next.id]: { ...prev, ...next } };
  return { ...state, [group]: nextGroup };
}

export const logoReducer: ReducerSpec<LogoState, AppAM> = {
  actions: [
    ...LOGO_ACTIONS
  ],
  state: LOGO_INITIAL_STATE,
  reducer: (state, action) => {
    if (action.channel !== "logo") return state;
    if (!state.enabled && action.event !== "start") return state;

    switch (action.event) {
      case "update": {
        const { group, id, x, y } = action.payload;
        const next: Circle = { id, x, y };

        return upsertItem(state, group as GroupKey, next);
      }

      case "start": {
        if (state.enabled) return state;

        return {
          ...state,
          enabled: true,
        };
      }

      case "stop": {
        if (!state.enabled) return state;

        return {
          ...state,
          enabled: false
        };
      }

      case "fps": {
        const { fps } = action.payload as LogoAM["fps"];

        if (state.fps === fps) return state;

        return {
          ...state,
          fps,
        };
      }

      case "count": {
        const next = action.payload as LogoAM["count"];
        const prev = state.itemCount;

        if (prev.d === next.d && prev.u === next.u && prev.x === next.x) return state;

        return { ...state, itemCount: next };
      }

      case "size": {
        const { height, width } = action.payload as LogoAM["size"];
        const prev = state.size;

        if (prev.height === height && prev.width === width) return state;

        return {
          ...state, size: {
            height,
            width,
          }
        };
      }

      case "batchUpdate": {
        if (!action.payload.changes.length) return state;
        const { changes } = action.payload;

        let wroteAny = false;
        for (const c of changes) {
          let prev = state[c.group][c.id];

          if (!prev) {
            prev = {
              ...state[c.group][c.id],
              ...c,
            };

            state = {
              ...state,
              [c.group]: {
                ...state[c.group],
                [c.id]: prev,
              }
            };

            wroteAny = true;
            continue;
          }

          const nx = c.x ?? prev.x;
          const ny = c.y ?? prev.y;

          if (nx !== prev.x || ny !== prev.y) {
            state = {
              ...state,
              [c.group]: {
                ...state[c.group],
                [c.id]: { ...prev, x: nx, y: ny },
              }
            };

            wroteAny = true;
          }
        }

        return wroteAny ? { ...state } : state;
      }

      case "introProgress": {
        const { remaining, total } = action.payload;

        return {
          ...state,
          intro: {
            ...state.intro,
            remaining,
            total,
          }
        };
      }

      case "introComplete": {
        return {
          ...state,
          intro: {
            ...(state.intro ?? {}),
            remaining: 0,
            done: true
          }
        };
      }

      default:
        return state;
    }
  },
};

Avoid writes if x,y unchanged.
Batch many updates per frame.
Only touch changed keys.

Step 3 – Create the store

export const store = createStore({
  name: "Quo.js",
  reducer: { logo: logoReducer },
  effects: [],
});

Step 4 – The Engine (outside React)

Runs rAF loop.
Computes dt and FPS.
Dispatches logo/batchUpdate.
Subscribes to store effects for start/stop.
Never imports React.

if (dt > 0) this.simulation.loop(this._dt, now);
if (this._running && gen === this._rafGen) {
  this._handle = requestAnimationFrame((t) => this._tick(t, gen));
}

Each Circle emits { group, id, x, y } updates when it moves.

Step 5 – Bridge Engine and Store in React

useEffect(() => {
  const engine = new Engine({ targetFPS: 60, autoStart: false }, store);
  const setup = async () => {
    const image = await loadImagePixels(quoLogo);
    const { specs, width, height, groupCounts } = extractCircleSpecsFromImage(
      image,
      { spacing: 3, initialR: 0.5, maxCircles: 1500 }
    );

    store.dispatch("logo", "size", { height, width });
    store.dispatch("logo", "count", groupCounts);

    const sim = new Simulation(engine, { items: specs, name: "Quo Packing" });

    engine.attach(sim);
    engine.init();
    engine.start();
  };

  setup();
  return () => engine.teardown();
}, [store]);

Hold-on, manu—how do we turn a PNG into a swarm of circles?

Under the hood, extractCircleSpecsFromImage loads the logo PNG into an offscreen canvas, samples pixel alpha at a configurable grid (default: 8px spacing), and emits a circle spec wherever alpha > 50.

const threshold = 0.2; // 0–1, tweak for density
const spacing = 8;

for (let y = 0; y < h; y += spacing) {
  for (let x = 0; x < w; x += spacing) {
    const alpha = ctx.getImageData(x, y, 1, 1).data[3] / 255;
    if (alpha > threshold) {
      circles.push({ x, y, r: spacing * 0.45 });
    }
  }
}

Want a denser swarm? Crank down spacing. Want mood lighting? Map alpha → radius. It’s just data—hack away.

Step 6 – React glue with @quojs/react

export const { useStore, useDispatch, useSliceProp } =
  createQuoHooks(AppStoreContext);

Now each <Circle> subscribes atomically:

export const Circle = ({ id, group }) => {
  const path = `${group}.${id}`;

  const { x, y } = useSliceProp({
    reducer: "logo",
    property: path,
  }) ?? { x: 0, y: 0 };

  return <circle className={`group-${group}`} cx={`${x}px`} cy={`${y}px`} />;
};

Only that circle re-renders when its own coords change.

Data flow recap

FAQ / Notes

Why not RTK? Needed channel/event model, async effects, atomic subs.
Why not three.js/WebGL? Overkill for 2D particles; SVG + Quo.js is lean.
Intro completion? Simulation tracks remaining circles → dispatches introProgress → introComplete.
FPS? Averaged via ring buffer, dispatched sparsely.

Why sparse dispatches, not per-frame spam?
Flooding React with 60 state updates/sec is a render big-bang. Instead, the Engine uses a ring buffer to track frame times, computing FPS only when the buffer wraps (~every 30 frames).

if (this.frameCount % 30 === 0) {
  const fps = 30 / (deltaSum / 1000);
  this.store.dispatch(setFps(fps));
}

Result? One atomic update every ~500ms, zero jank, and Redux Devtools stay sane. —yes, you've read it: Quo.js supports Redux Devtools— . Performance telemetry should serve the animation—not starve it.

Reproduce locally

pnpm add @quojs/core@0.2.0 @quojs/react@0.2.0

Create store (see Step 3).
Wrap <AppStoreContext.Provider value={store}>.
Mount Engine (Step 5).
Render SVG Circles (Step 6).

Docs for Quo.js and friends:

Core
React

Small but impactful patterns

Batch writes per frame.
No-op guard on identical values.
Exact-path subscriptions.
Guard rAF generation tokens.
Sparse telemetry dispatch.

Try it out!

Closing thoughts

This animation shows how React can be a renderer, not a game loop. With handling precise, granular state changes, you get high FPS, low React churn, and maintainable logic.

A quick note on the hook names for useSliceProp and useSliceProps: These will probably change to something more meaningful like useAtomicProp and useAtomicProps before the next release (in a week), so do not use them yet in prod. Quo.js is still in beta testing.

Have a nice coding, manu.

License: MPL-2.0 — share with the world.

Cómo dejé de re-renderizar el universo: Una historia de suscripciones atómicas en React

quojs — Wed, 05 Nov 2025 14:00:00 +0000

Cómo construí la animación del logo de Quo.js con un Engine fuera de React, suscripciones atómicas dentro de React, y casi cero código repetitivo.

TL;DR: Convertí un PNG estático del logo de Quo.js en cientos de círculos SVG animados que se ensamblan, se dispersan alrededor del mouse, y regresan suavemente a casa — todo en React 19 + TypeScript usando @quojs/core y @quojs/react. El truco es ejecutar un pequeño Engine completamente fuera de React, transmitir actualizaciones de estado en lotes a un store de Quo.js, y luego renderizar con suscripciones atómicas en React para que la UI solo se re-renderice cuando las coordenadas de un círculo específico realmente cambien.

Tech: React 19, TypeScript, Vite, SVG

State: @quojs/core y @quojs/react

Lo que NO se usa: three.js, WebGL, WebGPU. Esto es puro DOM/SVG + requestAnimationFrame, carnal.

Lo que verás (GIFs)

Si visitas el sitio web de Quo.js, verás esto:

Intro: las partículas convergen en la marca del logo "Quo.js".

Y si juegas con el cursor:

. Interactividad: los círculos orbitan alejándose del cursor y luego regresan a su punto de partida.

Dev.to podría comprimir los archivos GIF, si ves animaciones lentas, considera descargar los archivos GIF (intro e interacción) o visitar la web de Quo.js para un fluido 60fps.

La idea en un diagrama

Mantenemos React ligero al empujar todo el trabajo de animación a un nano-Engine simple y plano de TypeScript. El Engine posee el bucle de frames, quadtree y matemáticas de movimiento. Envía actualizaciones en lotes a un Store de Quo.js. React consume solo el pequeño fragmento que necesita por círculo mediante selectores atómicos.

Engine (fuera de React): bucle requestAnimationFrame, clamp de dt, suavizado de FPS, quadtree, física de círculos.
Store Quo.js: reducers puramente funcionales, efectos para temporizaciones pequeñas y eventos de ciclo de vida.
React: solo renderiza nodos de círculo vía useSliceProp('logo', 'd.circle_0') etc.

¿Por qué este diseño? (Rendimiento y simplicidad)

React permanece inactivo a menos que sea necesario. Cada componente <Circle> se suscribe a su propia ruta x,y. Sin re-renders globales. Sin prop drilling.
El Engine es agnóstico del framework. No sabe sobre React. Solo despacha acciones (batchUpdate) al store.
Menos código repetitivo que Redux/RTK. Quo.js usa canales + eventos, efectos sin thunks/sagas, y selectores atómicos para suscribirse a rutas exactas con notación de puntos.
Actualizaciones en lotes por frame + un reducer compacto mantienen las escrituras de estado mínimas.
rAF + clamp de dt + buffer circular de FPS dan movimiento suave sin tartamudeos.

Paso 1 – Modelar el estado y eventos de canal

Mantenemos el estado logo para la animación.

export type Circle = { id: string; x: number; y: number; r?: number };
export type GroupedCircle = { group: "d" | "u" | "x" } & Circle;

export type LogoState = {
  enabled: boolean;
  fps: number;
  itemCount: { d: number; u: number; x: number };
  size: { height: number; width: number };
  d: Record<string, Circle>;
  u: Record<string, Circle>;
  x: Record<string, Circle>;
  intro: { remaining: number; total?: number; done: boolean };
};

export type LogoAM = {
  start: {};
  stop: {};
  fps: { fps: number };
  size: { height: number; width: number };
  count: { d: number; u: number; x: number };
  update: GroupedCircle;
  batchUpdate: { changes: GroupedCircle[] };
  introProgress: { remaining: number; total: number };
  introComplete: {};
};

Patrón de dispatch:

store.dispatch("logo", "batchUpdate", { changes: [...] });

Paso 2 – El reducer: inmutable, rápido

import type { ActionPair, ReducerSpec } from "@quojs/core";
import type { AppAM, LogoAM, LogoState, Circle } from "../types";

export const LOGO_INITIAL_STATE: LogoState = {
  enabled: true,
  d: Object.create(null),
  u: Object.create(null),
  x: Object.create(null),
  fps: 0,
  itemCount: { d: 0, u: 0, x: 0 },
  size: { height: 0, width: 0 },
  intro: {
    remaining: 0,
    total: 0,
    done: false,
  },
};

const LOGO_ACTIONS = [
  ["logo", "update"],
  ["logo", "stop"],
  ["logo", "fps"],
  ["logo", "size"],
  ["logo", "count"],
  ["logo", "batchUpdate"],
  ["logo", "introProgress"],
  ["logo", "introComplete"],
  ["logo", "start"],
] as const satisfies readonly ActionPair<AppAM>[];

// azúcar para inferencia de tipos
type GroupKey = keyof Pick<LogoState, "d" | "u" | "x">;

function upsertItem(state: LogoState, group: GroupKey, next: Circle): LogoState {
  const groupMap = state[group];
  const prev = groupMap[next.id];

  // insertar
  if (!prev) {
    const nextGroup = { ...groupMap, [next.id]: next };
    return { ...state, [group]: nextGroup };
  }

  // actualizar solo si algo realmente cambió
  if (
    prev.x === next.x &&
    prev.y === next.y
  ) {
    return state; // no-op
  }

  const nextGroup = { ...groupMap, [next.id]: { ...prev, ...next } };
  return { ...state, [group]: nextGroup };
}

export const logoReducer: ReducerSpec<LogoState, AppAM> = {
  actions: [
    ...LOGO_ACTIONS
  ],
  state: LOGO_INITIAL_STATE,
  reducer: (state, action) => {
    if (action.channel !== "logo") return state;
    if (!state.enabled && action.event !== "start") return state;

    switch (action.event) {
      case "update": {
        const { group, id, x, y } = action.payload;
        const next: Circle = { id, x, y };

        return upsertItem(state, group as GroupKey, next);
      }

      case "start": {
        if (state.enabled) return state;

        return {
          ...state,
          enabled: true,
        };
      }

      case "stop": {
        if (!state.enabled) return state;

        return {
          ...state,
          enabled: false
        };
      }

      case "fps": {
        const { fps } = action.payload as LogoAM["fps"];

        if (state.fps === fps) return state;

        return {
          ...state,
          fps,
        };
      }

      case "count": {
        const next = action.payload as LogoAM["count"];
        const prev = state.itemCount;

        if (prev.d === next.d && prev.u === next.u && prev.x === next.x) return state;

        return { ...state, itemCount: next };
      }

      case "size": {
        const { height, width } = action.payload as LogoAM["size"];
        const prev = state.size;

        if (prev.height === height && prev.width === width) return state;

        return {
          ...state, size: {
            height,
            width,
          }
        };
      }

      case "batchUpdate": {
        if (!action.payload.changes.length) return state;
        const { changes } = action.payload;

        let wroteAny = false;
        for (const c of changes) {
          let prev = state[c.group][c.id];

          if (!prev) {
            prev = {
              ...state[c.group][c.id],
              ...c,
            };

            state = {
              ...state,
              [c.group]: {
                ...state[c.group],
                [c.id]: prev,
              }
            };

            wroteAny = true;
            continue;
          }

          const nx = c.x ?? prev.x;
          const ny = c.y ?? prev.y;

          if (nx !== prev.x || ny !== prev.y) {
            state = {
              ...state,
              [c.group]: {
                ...state[c.group],
                [c.id]: { ...prev, x: nx, y: ny },
              }
            };

            wroteAny = true;
          }
        }

        return wroteAny ? { ...state } : state;
      }

      case "introProgress": {
        const { remaining, total } = action.payload;

        return {
          ...state,
          intro: {
            ...state.intro,
            remaining,
            total,
          }
        };
      }

      case "introComplete": {
        return {
          ...state,
          intro: {
            ...(state.intro ?? {}),
            remaining: 0,
            done: true
          }
        };
      }

      default:
        return state;
    }
  },
};

Evita escrituras si x,y no han cambiado.
Actualiza muchos cambios en lote por frame.
Solo toca las claves modificadas.

Paso 3 – Crear el store

export const store = createStore({
  name: "Quo.js",
  reducer: { logo: logoReducer },
  effects: [],
});

Paso 4 – El Engine (fuera de React)

Ejecuta bucle rAF.
Calcula dt y FPS.
Despacha logo/batchUpdate.
Se suscribe a efectos del store para start/stop.
Nunca importa React.

if (dt > 0) this.simulation.loop(this._dt, now);
if (this._running && gen === this._rafGen) {
  this._handle = requestAnimationFrame((t) => this._tick(t, gen));
}

Cada Circle emite actualizaciones { group, id, x, y } cuando se mueve.

Paso 5 – Conectar Engine y Store en React

useEffect(() => {
  const engine = new Engine({ targetFPS: 60, autoStart: false }, store);
  const setup = async () => {
    const image = await loadImagePixels(quoLogo);
    const { specs, width, height, groupCounts } = extractCircleSpecsFromImage(
      image,
      { spacing: 3, initialR: 0.5, maxCircles: 1500 }
    );

    store.dispatch("logo", "size", { height, width });
    store.dispatch("logo", "count", groupCounts);

    const sim = new Simulation(engine, { items: specs, name: "Quo Packing" });

    engine.attach(sim);
    engine.init();
    engine.start();
  };

  setup();
  return () => engine.teardown();
}, [store]);

Espera, manu—¿cómo convertimos un PNG en un enjambre de círculos?

Bajo el capó, extractCircleSpecsFromImage carga el PNG del logo en un canvas fuera de pantalla, muestrea el alpha de píxeles en una cuadrícula configurable (predeterminado: espaciado de 8px), y emite una especificación de círculo donde alpha > 50.

const threshold = 0.2; // 0–1, ajusta para densidad
const spacing = 8;

for (let y = 0; y < h; y += spacing) {
  for (let x = 0; x < w; x += spacing) {
    const alpha = ctx.getImageData(x, y, 1, 1).data[3] / 255;
    if (alpha > threshold) {
      circles.push({ x, y, r: spacing * 0.45 });
    }
  }
}

¿Quieres un enjambre más denso? Reduce el espaciado. ¿Quieres iluminación ambiental? Mapea alpha → radio. Es solo data—hackéalo a tu gusto.

Paso 6 – Pegamento de React con @quojs/react

export const { useStore, useDispatch, useSliceProp } =
  createQuoHooks(AppStoreContext);

Ahora cada <Circle> se suscribe atómicamente:

export const Circle = ({ id, group }) => {
  const path = `${group}.${id}`;

  const { x, y } = useSliceProp({
    reducer: "logo",
    property: path,
  }) ?? { x: 0, y: 0 };

  return <circle className={`group-${group}`} cx={`${x}px`} cy={`${y}px`} />;
};

Solo ese círculo se re-renderiza cuando sus propias coordenadas cambian.

Resumen del flujo de datos

FAQ / Notas

¿Por qué no RTK? Necesitaba modelo de canal/evento, efectos asíncronos, suscripciones atómicas.
¿Por qué no three.js/WebGL? Exagerado para partículas 2D; SVG + Quo.js es ligero.
¿Completado de intro? La simulación rastrea círculos restantes → despacha introProgress → introComplete.
¿FPS? Promediado vía buffer circular, despachado escasamente.

¿Por qué despachos escasos, no spam por frame?

Inundar React con 60 actualizaciones de estado/seg es un big-bang de renderizado. En su lugar, el Engine usa un buffer circular para rastrear tiempos de frame, calculando FPS solo cuando el buffer se completa (~cada 30 frames).

if (this.frameCount % 30 === 0) {
  const fps = 30 / (deltaSum / 1000);
  this.store.dispatch(setFps(fps));
}

¿Resultado? Una actualización atómica cada ~500ms, cero jank, y Redux Devtools permanece sano. —sí, lo leíste bien: Quo.js soporta Redux Devtools—. La telemetría de rendimiento debe servir a la animación—no matarla de hambre.

Reproducir localmente

pnpm add @quojs/core@0.2.0 @quojs/react@0.2.0

Crear store (ver Paso 3).
Envolver <AppStoreContext.Provider value={store}>.
Montar Engine (Paso 5).
Renderizar SVG Circles (Paso 6).

Docs para Quo.js y amigos:

Core
React

Patrones pequeños pero impactantes

Escrituras en lotes por frame.
Guardia de no-op en valores idénticos.
Suscripciones a rutas exactas.
Guardia de tokens de generación rAF.
Despacho escaso de telemetría.

¡Pruébalo!

Reflexiones finales

Esta animación muestra cómo React puede ser un renderizador, no un bucle de juego. Manejando cambios de estado precisos y granulares, obtienes alto FPS, poca agitación de React, y lógica mantenible.

Una nota rápida sobre los nombres de los hooks para useSliceProp y useSliceProps: Estos probablemente cambiarán a algo más significativo como useAtomicProp y useAtomicProps antes del próximo lanzamiento (en una semana), así que no los uses todavía en producción. Quo.js todavía está en pruebas beta.

Te deseo buen código, manu.

Licencia: MPL-2.0 — comparte con el mundo.

⚡️ Redux Toolkit vs Quo.js: Why Granular State Beats the Global Reducer Model

quojs — Sat, 25 Oct 2025 03:47:24 +0000

Quo.js was born because I was done fighting two things in Redux/RTK apps:

Selector gymnastics to avoid render storms, and
Ceremony around async and side‑effects.

Below is an honest, technical comparison and an example of using Quo.js.

TL;DR

RTK: great DX vs raw Redux, but still broad, selector‑driven subscriptions; async via thunks/middleware; reducers keyed by slice; performance relies on memoization and careful equality.
Quo.js: typed channels + events and payloads, reducers subscribe to (channel, event) pairs, atomic dotted‑path subscriptions via connect(...), async middleware and effects built‑in, serialized dispatch queue, Redux DevTools support, and dynamic reducers/HMR‑friendly APIs.

If your pain is “too many re‑renders” or brittle selector trees, Quo’s path‑level reactivity and simple effect model are the pressure valves.

Mental model: where we diverge

Redux Toolkit (selector‑centric)

You organize state under slices.
Components read via useSelector(...) and you try to memoize everything.
Async work usually lives in thunks or extra middleware.
Performance depends on how narrow your selectors are and how cheap your equality is.

Quo.js (channel/event + atomic paths)

You declare reducers that list which (channel, event) pairs they react to, i.e. which events from which channels they care about.
You dispatch with dispatch(channel, event, payload).
UI (or services) subscribe atomically by reducer + dotted path, e.g. "items.3.title".
Async logic can live in middleware (pre‑reducer) or effects (post‑reducer), depending on your orchestration needs.

Example (Quo.js API)

Since Quo.js API is TypeScript-first, everything starts from a TypeScript design.

Import types and createStore from Quo.js core

import type {
  ActionPair,
  Readonly,
  EffectFunction,
  ReducerSpec,
  StoreInstance,
} from "@quojs/core";
import { createStore } from "@quojs/core";

Define the shape of your Reducer state

This defines the state structure each reducer manages.

type CountState = { value: number };

Define the shape of your App state

Group all reducers into a single application type — the shape of your global state.

type AppState = { count: CountState };

ActionMap (Reducer)

ActionMaps describe two things:

the events for a specific Reducer
the shape of the payload for each event

type CounterAM = { add: number; subtract: number; set: number };

In the above example, add, subtract and set become events.

ActionMap (Application)

Once you've defined an ActionMap for each Reducer, you can combine them into your global ActionMap.

type AppAM = { count: CounterAM };

In this example, count becomes a channel, producing these channel + event pairs:

count + add
count + subtract
count + set

Reducers

A reducer describes how one slice of state changes in response to actions. Exactly as in Redux (RTK), with a subtle difference:

Reducers subscribe to specific [channel, event] pairs, where channels map to Reducer names and events to actions. This defines the (channel, event, payload) declarative contract.

const COUNT_ACTIONS = [
  ["count", "add"],
  ["count", "subtract"],
  ["count", "set"],
] as const satisfies readonly ActionPair<AppAM>[];

export const countReducer: ReducerSpec<CountState, AppAM> = {
  actions: [...COUNT_ACTIONS],
  state: { value: 0 },
  reducer: (state, action) => {
    switch (action.event) {
      case "add": return { value: state.value + action.payload };
      case "subtract": return { value: state.value - action.payload };
      case "set": return { value: action.payload };
      default: return state;
    }
  },
};

Middleware

Middleware in Quo.js are async by default. No thunks, sagas, or wrappers required. Middleware process actions before reducers, ideal for async logic or conditional vetoes.

export const LogMiddleware = async (getState, action, dispatch): Promise<boolean> => {
  console.dir(action); // log the action

  // Audit only when addition is attempted
  if (action.channel === "count" && action.event === "add") {
    const { count: { value: currentValue } } = getState();
    if (currentValue > 10) return false; // veto action
  }

  return true; // continue
};

Effects

Effects run after reducers. getState() always reflects the latest version of state. Effects can dispatch actions — just avoid loops!

export const countResetEffect: EffectFunction<Readonly<AppState>, AppAM> = (
  action,
  getState,
  dispatch,
) => {
  if (action.channel !== "count" || action.event !== "add") return;
  const state = getState();
  if (state.count.value > 9) dispatch("count", "set", 0);
};

Effects are declared as part of the createStore config, or dynamically after creation:

Effect that gets ALL events from all channels

store.registerEffect(countResetEffect); //

Effect for specific channel + event combination

store.onEffect("count", "set", async (action, getState, dispatch) => {
  console.log("Count state has been reset");
});

Creating the Store

Ensure the Store is typed:

export type AppStore = StoreInstance<keyof AppState & string, AppState, AppAM>;

The just call createStore() passing everyting we've created so far:

export const store = createStore({
  name: "Quo.js Rocks!", // Visible in Redux DevTools
  reducer: { count: countReducer },
  middleware: [LogMiddleware],
  effects: [countResetEffect],
});

It may seem verbose, but stay with it — it pays off.

Subscriptions

Quo.js is framework‑agnostic: as per today, it runs on React, Node.js, or Deno. React bindings simply wrap these subscriptions via useSyncExternalStore, but that is topic for another post. Here, we are just exploring the core of Quo.js.

please share and comment if you want to see such a post focused on React.

But... if you are interested and can't wait, please check this example!

Read current state

console.log("INIT state:", store.getState()); // { count: { value: 0 } }

Subscribe to state changes (coarse)

const unsubscribe = store.subscribe(() => {
  const { count } = store.getState();

  console.log("[STATE] count changed:", count);
});

Subscribe to specific actions

const offAdd = store.on("count", "add", (payload: number) => {
  console.log("[ACTION] count:add", payload);
});

const offSet = store.on("count", "set", (payload: number) => {
  console.log("[ACTION] count:set", payload);
});

Dispatch a few actions

store.dispatch("count", "set", 7);
store.dispatch("count", "add", 5);
console.log("After add(5):", store.getState().count);

countResetEffect will auto‑reset count to 0 when it exceeds 9.

setTimeout(() => {
  offAdd();
  offSet();
  unsubscribe();
  console.log("Listeners removed.");
}, 200);

Subscriptions and rendering behavior

RTK

useSelector runs on every store change; you rely on memoization/equality to bail out.
Wider selectors = more frequent updates.

Quo.js

Coarse: store.subscribe(() => ...) fires once per committed action.
Fine‑grained: store.connect({ reducer, property: "a.b.c" }, handler) fires only when that dotted path (or its ancestors) change.
Quo detects leaf changes via structural comparison and emits each leaf and its ancestors exactly once.

This eliminates accidental broad subscriptions and the “selector fan‑out” problem.

Dynamic reducers & HMR

Quo supports both replace and register patterns at runtime.

const dispose = store.registerReducer("filters", {
  state: { q: "" },
  actions: [["todos", "setAll"]] as const,
  reducer(s, a) {
    if (a.channel === "todos" && a.event === "setAll") return { q: "" };
    return s;
  },
});

dispose();

store.replaceReducers({ todos: todosReducer }, { preserveState: true });

DevTools, immutability, and safety

State is frozen per‑slice on commit (freezeState(structuredClone(...))).
Redux DevTools integration is built‑in (time‑travel, import/export, jump, commit).
Dispatch is serialized via an internal FIFO queue with a re‑entrancy guard, ensuring effects dispatch safely without tearing.

Trade‑offs (honest list)

RTK — Pros

Huge ecosystem, tutorials, examples.
Familiarity for many teams.
DevTools, Immer, solid ergonomics.

RTK — Cons

Selector complexity and accidental wide subscriptions.
Async fragmentation (thunks, sagas, RTK‑Query, etc.).
Performance relies on memoization discipline.

Quo.js — Pros

Precise subscriptions via dotted paths (connect).
Async built‑in (middleware + effects).
Channel/event semantics keep reducers modular and explicit.
Dynamic reducers and HMR‑ready APIs.

Quo.js — Cons

New mental model (channels/events vs action types).
Smaller ecosystem (for now).
You still need to normalize large collections for efficient diffs.

Pragmatic migration tips

You don’t have to nuke RTK. Start small:

Add a Quo store alongside Redux for one problematic slice.
Rebuild that slice using Quo reducers and atomic subscriptions.
Move async logic into effects. Delete thunks one by one.
Replace fragile selectors with connect({ reducer, property }).
Expand gradually — and use DevTools to compare behaviors.

Closing

RTK made Redux pleasant. Quo.js makes global state boring — in the best way.
You dispatch clear channel/event pairs, reducers stay small and local, async slots are obvious, and your UI only listens to what it actually cares about.

If you’ve fought React re‑renders and selector sprawl, this model will feel like taking ankle weights off your app.

— Manu (creator of Quo.js)

Atomic State or Atomic Subscriptions?

quojs — Sat, 25 Oct 2025 02:00:17 +0000

Many “reactive” state libraries try to fix performance with atomic state splits, but that often fragments logic and hurts scalability.

What if instead of atomizing state, we atomized subscriptions — so updates stay precise, but the model remains holistic?

That’s the line of thinking I’ve been exploring lately with a new approach to reactive state management.

Has anyone else experimented with that idea?

Introducing Quo.js: Declarative, Ultra-simple, Expressive State Management for React

quojs — Sat, 18 Oct 2025 00:20:20 +0000

Introducing Quo.js

Declarative • Ultra-simple • Expressive

Quo.js is a modern, open-source state management library inspired by Redux — but without the Redux Toolkit baggage.

It brings back the simplicity and predictability of the original Redux pattern while introducing:

🗪 Channels + Events — actions become { channel, event, payload }
⚡ Native async middleware & effects — async by default; no thunks or sagas
🎯 Granular (atomic) subscriptions — update only what changes
🧩 Dynamic reducers — add or remove reducers at runtime
🧠 TypeScript-first design
🕹️ React bindings ready for Suspense and Concurrent Mode
📦 Zero dependencies

🧭 The idea behind Quo.js

Redux was brilliant — explicit, predictable, and easy to reason about.

But over time, modern abstractions (Toolkit, Zustand, Recoil…) traded that clarity for convenience, and state management became heavier again.

Selectors everywhere, async middleware chains, and component re-renders for tiny changes.

Quo.js started with a simple question:

“What if Redux stayed explicit — but became atomic, async-aware, and effortless?”

⚙️ The Channel + Event model

Instead of actions like { type: 'todos/add', payload }, Quo.js uses channels and events:

store.dispatch({
  channel: "todo",
  event: "add",
  payload: { title: "Write intro post" }
});

Reducers subscribe to specific channels and events (or even property paths) so they only react to what matters.

This enables fine-grained reactivity — without selectors.

🔬 Atomic property subscriptions

You can subscribe directly to a property path:

store.subscribe("todo.data.4.status", handler);

When that property changes, only the component that depends on it re-renders.

No context broadcasts, no memo gymnastics.

Result: updates stay flat and localized — even in large component trees.

🧩 Async middleware & effects

Quo.js ships with an async runtime — no external setup required.

You can define effects that orchestrate workflows, cancel tasks, or coordinate across reducers.

store.effect("todo/fetchAll", async (ctx) => {
  const data = await fetchTodos();
  ctx.dispatch({ channel: "todo", event: "set", payload: data });
});

Async Effects are cancellable and composable — think of them as workflow controllers for your app.

📊 Quo.js vs Redux Toolkit — Profiler Results

Both implementations render the same interactive todo list (creation, filtering, toggling).

Metric	Redux Toolkit	Quo.js
Re-renders per toggle	12	1
Total re-renders (12 todos)	144	12
Rendering pattern	Broad, spiky	Flat, localized

Each Quo.js update touches only the subscribed component.

Atomic property subscriptions eliminate wasted renders — even in nested lists.

🔗 Full comparison:

Quo.js vs Redux Toolkit: Profiler Analysis →

🧠 Philosophy

What really defines a state manager isn’t its API surface — it’s the philosophy behind it.

How predictable are updates?

How much boilerplate stands between intent and effect?

Quo.js focuses on:

Explicit events
Predictable transitions
Native async orchestration
Minimal surface area

No magic. No hidden optimizations. No ceremony.

🚀 Quick Start

npm i @quojs/core @quojs/react

import { createStore } from "@quojs/core";
import { StoreProvider } from "@quojs/react";

Wrap your React tree:

<StoreProvider store={store}>
  <App />
</StoreProvider>

Use the hooks:

const todo = useSelect("todo.data.4");
const dispatch = useDispatch();

That’s it — no selectors to memoize, no reducers to register manually.

🧩 Packages

Package	Description
@quojs/core	Core store, reducers, middleware, effects (framework-agnostic)
@quojs/react	React provider & hooks (Suspense / Concurrent-ready)
examples/	Runnable samples including the Redux comparison demo

💬 Contributing

Quo.js is fully open source under MPL-2.0.

Check out the Contributing Guide — feedback, forks, and adapters are all welcome.

If you’re into async workflows, reactive state, or typed APIs, come play with us.

🪄 Closing

Quo.js doesn’t try to replace Redux — it evolves it.

A smaller core, more expressive semantics, and a focus on developer happiness.

💙 Declarative

⚡ Ultra-simple

🎨 Expressive

🧭 GitHub Repository

Thanks for reading - We’d love to hear your thoughts, ideas, or performance tests using Quo.js!