Skip to content

code/editor/useDetachCleanup

import { … } from 'zidane-ui/code/editor'ui/src/code/editor/useDetachCleanup.ts

Functions#

useDetachCleanupFunction#

@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.

TypeScript
function useDetachCleanup(): RefObject<HTMLDivElement | null>
RefObject<HTMLDivElement | null>

ui/src/code/editor/useDetachCleanup.ts:16