Reactor Hooks

The @ic-reactor/react package exports “Reactor Hooks” which are direct alternatives to the bound hooks generated by createActorHooks.

These hooks are prefixed with useReactor (e.g., useReactorQuery) and require the reactor instance to be passed explicitly as a property.

Import

import {
  useReactorQuery,
  useReactorMutation,
  useReactorSuspenseQuery,
  useReactorMethod,
} from "@ic-reactor/react"

When to Use

✅ Use Reactor Hooks when:

You have multiple reactors and don’t want to create separate hook factories for each.
You prefer passing dependencies explicitly.
You are building a library or component that accepts a reactor as a prop.

❌ Use createActorHooks when:

You want simpler, cleaner code (context-aware, no need to pass reactor).
You are working with a single main canister.

Usage

useReactorQuery

Same as useActorQuery, but requires a reactor property.

import { useReactorQuery } from "@ic-reactor/react"
import { backend } from "./actor"

function UserProfile({ userId }) {
  const { data } = useReactorQuery({
    reactor: backend, // 👈 Required!
    functionName: "getUser",
    args: [userId],
  })

  return <div>{data?.name}</div>
}

useReactorMutation

Same as useActorMutation, but requires a reactor property.

import { useReactorMutation } from "@ic-reactor/react"
import { backend } from "./actor"

function TransferForm() {
  const { mutate } = useReactorMutation({
    reactor: backend, // 👈 Required!
    functionName: "transfer",
    onSuccess: () => console.log("Success!"),
  })

  return <button onClick={() => mutate([data])}>Send</button>
}

Available Hooks

Reactor Hook	Equivalent Bound Hook	Description
`useReactorQuery`	`useActorQuery`	Fetch data (read-only)
`useReactorMutation`	`useActorMutation`	Modify data (updates)
`useReactorSuspenseQuery`	`useActorSuspenseQuery`	Suspense-ready fetch
`useReactorInfiniteQuery`	`useActorInfiniteQuery`	Pagination support
`useReactorSuspenseInfiniteQuery`	`useActorSuspenseInfiniteQuery`	Suspense + Pagination
`useReactorMethod`	`useActorMethod`	Unified hook

Type Safety

Reactor hooks provide the same type safety as bound hooks. TypeScript infers types from the passed reactor instance.

const { data } = useReactorQuery({
  reactor: backend,
  functionName: "getUser", // ✅ Check against backend methods
  args: ["123"], // ✅ Checked against method signature
})