---
title: useMutations
subpath: pota/use/mutation
topic: Observers
desc: Signal accessor of the latest MutationRecords for a node.
---

# useMutations

`useMutations(node, init?)` returns a signal accessor that updates
with each batch of `MutationRecord`s observed on `node`. It is the
reactive half of the [`pota/use/mutation`](/use/mutation) emitter
pair; for a plain callback use
[`onMutations`](/use/mutation/onMutations), and to attach an observer
declaratively use [`mutated`](/use/mutation/mutated). The default
`init` is `{ childList: true, subtree: true }`.

## Arguments

| Argument | Type                   | Description                                                |
| -------- | ---------------------- | ---------------------------------------------------------- |
| `node`   | `Node`                 | Element to observe.                                        |
| `init`   | `MutationObserverInit` | Optional observer config; defaults to childList + subtree. |

**Returns:** a signal accessor (reader function) holding the latest
`MutationRecord[]` batch — `undefined` until the first batch arrives.

## Examples

### Read mutations reactively

Read the latest batch of records inside an effect; it re-runs whenever
the node mutates. The accessor reads `undefined` until the first
batch, hence the `?.`.

```jsx
import { effect, render, signal } from 'pota'
import { useMutations } from 'pota/use/mutation'

function App() {
	const records = useMutations(document.body)
	const log = signal('mutations will appear here')

	effect(() => log.write(`mutations: ${records()?.length ?? 0}`))

	return <p>{log.read}</p>
}

render(App)
```