# 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

```typescript
import {
  useReactorQuery,
  useReactorMutation,
  useReactorSuspenseQuery,
  useReactorInfiniteQuery,
  useReactorSuspenseInfiniteQuery,
  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.

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

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.

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

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`](https://ic-reactor.b3pay.net/v3/reference/reactorhooks/usereactorquery)                                 | `useActorQuery`                 | Fetch data (read-only) |
| [`useReactorMutation`](https://ic-reactor.b3pay.net/v3/reference/reactorhooks/usereactormutation)                           | `useActorMutation`              | Modify data (updates)  |
| [`useReactorSuspenseQuery`](https://ic-reactor.b3pay.net/v3/reference/reactorhooks/usereactorsuspensequery)                 | `useActorSuspenseQuery`         | Suspense-ready fetch   |
| [`useReactorInfiniteQuery`](https://ic-reactor.b3pay.net/v3/reference/reactorhooks/usereactorinfinitequery)                 | `useActorInfiniteQuery`         | Pagination support     |
| [`useReactorSuspenseInfiniteQuery`](https://ic-reactor.b3pay.net/v3/reference/reactorhooks/usereactorsuspenseinfinitequery) | `useActorSuspenseInfiniteQuery` | Suspense + Pagination  |
| [`useReactorMethod`](https://ic-reactor.b3pay.net/v3/reference/reactorhooks/usereactormethod)                               | `useActorMethod`                | Unified hook           |

## Type Safety

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

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

## Type Exports

The hooks export types with two naming conventions:

### `UseReactor*` Types (with reactor parameter)

For direct hook usage where you pass the reactor explicitly:

```typescript
import type {
  UseReactorQueryParameters,
  UseReactorQueryResult,
  UseReactorMutationParameters,
  UseReactorMutationResult,
  UseReactorSuspenseQueryParameters,
  UseReactorSuspenseQueryResult,
  UseReactorInfiniteQueryParameters,
  UseReactorInfiniteQueryResult,
  UseReactorSuspenseInfiniteQueryParameters,
  UseReactorSuspenseInfiniteQueryResult,
  UseReactorMethodParameters,
  UseReactorMethodResult,
} from "@ic-reactor/react"
```

### `UseActor*` Types (without reactor parameter)

For use with `createActorHooks` where the reactor is already bound:

```typescript
import type {
  UseActorQueryParameters,
  UseActorQueryResult,
  UseActorMutationParameters,
  UseActorMutationResult,
  UseActorSuspenseQueryParameters,
  UseActorSuspenseQueryResult,
  UseActorInfiniteQueryParameters,
  UseActorInfiniteQueryResult,
  UseActorSuspenseInfiniteQueryParameters,
  UseActorSuspenseInfiniteQueryResult,
} from "@ic-reactor/react"
```

**Note:** All parameter types extend TanStack Query's base types. This means you get
  access to standard options like `gcTime`, `retry`, `refetchOnWindowFocus`,
  `networkMode`, and `placeholderData`.

**Tip:** These hooks are essentially the "raw" versions of the hooks created by
  `createActorHooks`. In fact, `createActorHooks` uses these hooks internally!