React Utilities

Additional helper hooks and path imports to streamline state tracking and client bundler optimization.

useIsMutating

Track active mutations globally or filter specifically by a mutation key. This is useful for displaying global syncing spinners, loading bars, or button disables.

import { useIsMutating } from "@explita/actyx-rpc/react";
 
function GlobalSpinner() {
  // Returns the number of active mutations in the app
  const isMutating = useIsMutating();
 
  // Or filter specifically by mutation key:
  // const isAddingTodo = useIsMutating(["addTodo"]);
 
  if (!isMutating) return null;
 
  return <div className="spinner">Syncing with database...</div>;
}

Client-Only Subpaths

When developing for browser environments (such as Next.js Client Components) or building single-page applications, you can import clients directly from subpaths.

This prevents your client bundlers from pulling in node-only/server-side dependencies (like fs, node:async_hooks, etc.), keeping your JS bundle size minimal.

// Safely import SSEClient without pulling in server/node code:
import { SSEClient } from "@explita/actyx-rpc/client/sse";
 
// Safely import WebSocket client:
import { WSClient } from "@explita/actyx-rpc/client/ws";