Why can mutating reactive state inside a Vue 3 onUpdated hook cause an infinite update loop, and how does Vue react?

## Why the loop exists In Vue 3 every component has a **render effect**: when the render function runs, Vue tracks which reactive values it reads, and a later change to any of them schedules the component's update job. The update job re-renders, patches the DOM, and then queues the component's `onUpdated` callbacks as **post-flush callbacks**. Now put a write inside `onUpdated`: ```ts import { ref, onUpdated, useTemplateRef } from 'vue' const panel = useTemplateRef<HTMLElement>('panel') const height = ref(0) // shown in the template as {{ height }}px onUpdated(() => { height.value = panel.value!.offsetHeight // writes render state }) ``` The sequence becomes: 1. Something changes; the component re-renders. 2. `onUpdated` runs and writes `height`. 3. `height` is read by the template, so the component is queued again. 4. The re-render patches the DOM, and `onUpdated` runs again: back to step 2. Whether this is infinite depends on the value. Vue only triggers when the new value differs from the old one (an `Object.is` style comparison), so if the second pass writes the same number, nothing is queued and the loop ends after one extra render. If every pass produces a new value, for example a height that grows because the text `"123px"` itself changes the layout, or a counter that is incremented, it never settles. ## What Vue does about it | Build | Behaviour | |---|---| | Development | The scheduler keeps a per-flush count of how often each job runs. When one job exceeds **100** runs, Vue reports `Maximum recursive updates exceeded in component <Name>` and skips that job. | | Production | The counting code is stripped. Nothing interrupts the cycle, so the tab can freeze or run out of stack. | The full development message explains that "you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself" and lists the usual sources: the **component template, render function, updated hook or watcher source function**. Seeing it is a strong hint to look at `onUpdated` first. The warning is a safety net, not a fix. A loop that happens to converge after 20 iterations never trips it, yet still costs 20 renders per change. ## Why onBeforeUpdate does not have this problem `onBeforeUpdate` runs inside the render effect, before the render function, while Vue has self-recursion switched off. A write there is simply read by the render that follows. Of the two update hooks, only `onUpdated`, which runs after the render has finished, can start a new cycle this way. ## How to fix it Pick the tool that matches what the value really is: - **Derived from other state** → use `computed`. It is cached and needs no hook at all. - **Caused by one specific change** → set it where that change happens, or watch that source and, if the DOM is needed, `await nextTick()` or give the watcher `flush: 'post'`. - **Needs a DOM measurement** → measure in `onUpdated` but store the result in a plain variable, or guard the write so it only happens when the value differs, and make sure the layout does not depend on the stored value. - **Purely visual follow-up** → do DOM work directly (focus, scroll, a third-party widget refresh) instead of writing reactive state. A guarded write, fixed so it cannot oscillate: ```ts onUpdated(() => { const h = panel.value!.offsetHeight if (h !== height.value) height.value = h // converges once layout is stable }) ``` The guard only helps when the displayed value does not itself change the layout; if it does, move the measurement out of the render cycle entirely, for instance by observing size changes on the element. ## A realistic loop that looks innocent Loops rarely come from an obvious `counter++`. A more typical case is **measure, then display**: a card checks in `onUpdated` whether its title overflows and sets an `isTruncated` ref that shows a small tooltip icon. The icon takes horizontal space, so the title now overflows less, or no longer at all; the next `onUpdated` sets `isTruncated` back to `false`, the icon disappears, the title overflows again, and the component oscillates between two states. Each pass writes a *different* value, so the change check never stops it. The cure is to break the dependency between the measurement and what it controls: reserve space for the icon so its presence does not change the measured width, or measure an element whose size does not depend on the result. ## What interviewers listen for - That the loop comes from **the hook's position after the render**, not from a Vue bug. - That **unchanged writes do not trigger**, so the problem is writes that keep producing new values. - That the recursion error is **development-only** and caps at 100 runs of one job per flush. - That the fix is structural: `computed`, a targeted watcher, or DOM-only work in the hook.