What is Vue.nextTick?

My experience of using nextTick to improve User Experience

GP Lee
GP Lee
Mar 24 · 3 min read

What is Vue.nextTick() in an offical Vue.js documentaition

According to vue.js offical documentation ( https://vuejs.org/v2/api/#Vue-nextTick)

  • Defer the callback to be executed after the next DOM update cycle
  • Use it immediately after you’ve changed some data to wait for the DOM update
  • immediately , DOM update , Callback …

so I got the sense that nextTick has something to do with DOM update immediately, right?

  • Promise , Async / Await is also available

Okay! I understand the concept. So why do I have to know??

Photo by bruce mars on Unsplash

How I use Vue.nextTick() in real life

vs.

Can you see the difference?

The first gif uses $nextTick method

example.js
  • If a user clicks upload text on the gifs, handleFiles function is executed
  • It is a Promise function that essentially setup the directory & upload the files on the created directory and isFileUploaded is a state which triggers the UI change
Photo by Natasha Vasiljeva on Unsplash
  • The second gif has a UX problem that it seems like the page is frozen because the UI has no change at all until the all the Promises are settled (which might takes ms to few seconds)
  • I first think that writing a code which updates the isFileUploaded state before Promise API call await carfsModule.setupSubDirectory() will solve the issue
this.isFileUploaded = true;const directory = await carfsModule.setupSubDirectory();/// ...

But It did not work

  • isFileUploaded state is still updated AFTER / At the same time the Promise APIs are resolved [which is Second Gif]
  • I solve the issue with using this.$nextTick()
  • this.$nextTick() helps updating the isFileUploaded state immediately (Before the Promise API) [which is First Gif]
this.isFileUploaded = true; // does not work until all Promise are resolved
await this.$nextTick(); // console.log(this.isFileUploaded) // true const directory = await carfsModule.setupSubDirectory();

process.nextTick in Node.js

In node.js, nextTick helps its callback function to execute prior to other callback functions in Event loop

has an output of

nextTick
promise
timeout
immediate
  • process.nextTick executes prior to setImmediate or setTimeout
  • Also, resolved Promise has higher priority over setImmediate or setTimeout

Back to our example

nextTick has a priority over Promise.resolve , setTimeout , setImmediate

Let’s check this out example

has an output of

helloworld3
helloworld5
nextTick
promise
timeout

In other words, isFileUploaded state will convert from false to true as a priority regardless of its place in the function

  • Microtask : process.nextTick and Promise are often called as microtask

Hope you enjoy reading

Photo by Jan Tinneberg on Unsplash

JavaScript in Plain English

Learn the web's most important programming language.

GP Lee

Written by

GP Lee

Full Stack Engineer (JS, C#, AWS) in NYC. Please follow me on @gpda (Github) or @gpleeda (LinkedIn)

JavaScript in Plain English

Learn the web's most important programming language.

More From Medium

More from JavaScript in Plain English

More from JavaScript in Plain English

More from JavaScript in Plain English

32 funny Code Comments that people actually wrote

10.3K

More from JavaScript in Plain English

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade