What is nextTick in Vue and when do you need it?
Understand Vue's nextTick: run code after the DOM updates. Learn why Vue renders asynchronously and when to use nextTick for focus, scroll, and layout reads.
Expected Interview Answer
nextTick is a Vue utility that runs a callback (or resolves a promise) after Vue has finished flushing the current batch of reactive state changes to the DOM. You use it when you need to read or act on the updated DOM immediately after changing data.
Vue does not update the DOM synchronously on every state change; it buffers changes and applies them in a single asynchronous flush for efficiency. That means right after you set a reactive value, the DOM still shows the old markup. nextTick lets you defer code until after the re-render, so you can measure an element, focus a newly rendered input, scroll to a just-added item, or integrate with a non-Vue library that reads the DOM. It works as a callback (nextTick(fn)) or awaited (await nextTick()) in both the Options and Composition APIs.
- Guarantees the DOM reflects the latest state before you read it
- Avoids measuring stale layout or dimensions
- Enables focusing or scrolling to freshly rendered elements
- Batches updates so the callback runs once after all changes
- Bridges Vue's async rendering with imperative DOM APIs
AI Mentor Explanation
nextTick is like waiting for the third umpire's decision to appear on the big screen before you react. The moment a wicket is appealed, the on-field call is not final yet; the DOM has not updated. You hold your celebration until the verdict is displayed. nextTick is that pause: run your reaction only after the screen shows the confirmed, updated state rather than the stale live moment.
Step-by-Step Explanation
Step 1
Change reactive state
Update a ref or reactive property; Vue queues the change rather than touching the DOM immediately.
Step 2
Understand the async flush
Vue batches all changes in the current tick and applies them to the DOM in one microtask for efficiency.
Step 3
Call nextTick
Pass a callback to nextTick(fn) or await nextTick() so your code runs after the DOM has been patched.
Step 4
Read or act on the DOM
Inside the callback, safely measure elements, focus inputs, scroll, or hand off to a non-Vue library.
What Interviewer Expects
- Understanding that Vue updates the DOM asynchronously
- Knowing nextTick runs after the DOM patch
- Concrete use cases like focus, scroll, and measuring layout
- Awareness of both callback and promise/await forms
- How it works in Composition API via import from vue
Common Mistakes
- Assuming the DOM updates synchronously right after setting data
- Reading element dimensions before the re-render, getting stale values
- Overusing nextTick when a watcher or computed would be cleaner
- Forgetting to import nextTick in the Composition API
- Confusing nextTick with setTimeout or a real network delay
Best Answer (HR Friendly)
“nextTick is a small Vue helper that lets you wait until the screen has finished updating after you change some data. You use it when you need to do something with the freshly updated page, like focusing a new input box or measuring how tall an element became.”
Code Example
import { ref, nextTick } from 'vue'
const showInput = ref(false)
const inputEl = ref(null)
async function reveal() {
showInput.value = true // DOM not updated yet
await nextTick() // wait for Vue to render the input
inputEl.value.focus() // now the element exists, safe to focus
}
// Callback form works too:
// nextTick(() => inputEl.value.focus())Follow-up Questions
- Why does Vue batch DOM updates instead of applying them synchronously?
- What are the two ways to call nextTick?
- How is nextTick different from setTimeout(fn, 0)?
- How do you use nextTick inside the Composition API?
- Can a watcher sometimes replace the need for nextTick?
MCQ Practice
1. When does a nextTick callback execute?
nextTick schedules its callback to run after Vue has applied the current batch of state changes to the DOM.
2. Why might reading el.offsetHeight immediately after changing data give a stale value?
Vue defers DOM patching to an async flush, so right after a state change the DOM still reflects the old layout until nextTick.
3. How do you use nextTick in the Composition API?
In the Composition API you import nextTick from 'vue' and either pass a callback or await it; this.$nextTick is the Options API form.
Flash Cards
What does nextTick do? — Runs a callback (or resolves a promise) after Vue flushes the current state changes to the DOM.
Why is it needed? — Vue updates the DOM asynchronously in a batch, so right after setting data the DOM is still stale.
Common use cases — Focus a new input, scroll to a rendered element, measure layout, or hand off to a non-Vue library.
Two forms — Callback: nextTick(fn). Promise: await nextTick(). Options API also has this.$nextTick.
nextTick vs setTimeout(0) — nextTick uses a microtask tied to Vue's render cycle; it runs sooner and is guaranteed after the DOM patch.
Continue Learning
Related Interview Questions
What is the Vue instance and how does the application lifecycle work?
medium
What is the difference between the Options API and the Composition API in Vue?
medium
What are computed properties in Vue and how do they differ from methods?
easy
What is Vue.js and how does it differ from React and Angular?
easy