# code/editor/useDetachCleanup (zidane-ui/code/editor)

Import: `import { … } from 'zidane-ui/code/editor'`. Source: [ui/src/code/editor/useDetachCleanup.ts](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/useDetachCleanup.ts).

## Functions

### `useDetachCleanup`

Function.

`@pierre/diffs` attaches a shadow root to `<diffs-container>` from a ref
callback. React 19 StrictMode (dev only) detaches and re-attaches refs on
mount; on the second attach pierre finds the previous instance's `<pre>` in
the shadow root, treats it as pre-rendered HTML and never paints.

The layout-effect cleanup runs during that simulated unmount and moves the
shadow children aside so the re-attach starts clean. Effects also re-run
without any ref re-attach (Fast Refresh, and a real unmount never runs the
setup again), so the setup checks whether pierre repopulated the shadow
root: if it is still empty, the same instance is alive and the children
are put back. Production never runs the cleanup before a real unmount.

```ts
function useDetachCleanup(): RefObject<HTMLDivElement | null>
```

**Returns** `RefObject<HTMLDivElement | null>`

Source: [ui/src/code/editor/useDetachCleanup.ts:16](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/useDetachCleanup.ts#L16)