Do you know!?!
Javascript is a single-threaded language
Yeah, you read it correctly, Javascript is a single-threaded language. Surprised!!! ? ?
Javascript has one call stack and one memory heap. All events will be put into this stack, execute one by one by ordering.
In other words, Javascript’s stack executes Synchronous!
Thank Javascript engine (V8, Spidermonkey, JavaScriptCore, etc…) even though Javascript is a single-threaded language but makes Javascript super fast, sometimes make some people misunderstanding.
Wait!?! ?… but Javascript can do Asynchronous as well
Yeah, you are right. Technically it is still same stack but with different order, example:
console.log('Javascript')
setTimeout(() => {
console.log('Synchronous')
}, 1000)
console.log('is')
复制代码
So the result is …
Javascript
is
undefined
Synchronous
复制代码
Wait … what?!? ??? Where did undefined
come in from? And why Syncronous
is in the last.
So setTimeout
tells Javascript is that “Hey, I have event but I also want execute this event after 1s”. So Javascript will execute setTimeout
in the last.
After executing console.log('Javascript')
and console.log('is)'
- Javascript:
setTimeout
“Are you ready?” - setTimeout: Not yet, need to wait for 1 second
- Javascript: Okay. When you are ready, do let me know, trigger the callback.
- Javascript: undefined as default.
1 second later
- setTimeout: Okay, I am ready. Please execute
- Javascript: Synchronous
Well, … you might think “hmm, it is a bit strange, but I got it” but why it relates to startTransition? ?
The answer is Yes, it is related.
startTransition: Urgent event and Not Urgent event
As the user types input search, the user expects 2 things to happen
- Words are typed should show immediately – urgent event
- The search result can show after typing – not urgent event
In other words, urgent events are those events we want to execute immediately, and not urgent events are those events that can execute after urgent events finish.
// Urgent event
setInputValue(value)
....
....
// Not urgent event
setSearchData(data)
复制代码
So why it matters because Javascript is a single-threaded language, when one event executes the rest will be “frozen”, in the status “waiting”.
Before React 18, all events in React are urgent, which means it will execute one by one as Javascript does. However, it is not the “best” user experience in some scenarios.
Back to our example
setInputValue(value)
...
setSearchData(data)
复制代码
- user: type ‘A’ into Input field
- setInputValue: set value ‘A’ into Input and render ✅
- setSearchData: set search data by value ‘A’ and render but it takes a bit time ?
- user: type ‘B’ into Input field
- setInputValue: set value ‘AB’ into Input and render but ?
- Javascript: Please wait for setSearchData finish first ✋
- user: Feel a bit laggy, value ‘B’ doesn’t show immediately ?
- Javascript: Okay setSeachDate finishes, setInputValue you can go ahead. ✅
- setInputValue: set value ‘AB’ into Input and render
- setSearchData: set search data by value ‘AB’ and render but it takes a bit time
So to enhance the user experience in those scenarios, React provides startTransition feature to let us as developers decide which event is urgent, which event is not urgent. In our case, setInputValue
is urgent and setSearchDate
is not urgent.
setInputValue(value)
...
startTransition(() => {
setSearchData(data)
})
复制代码
Well, you might see a bit hard to see different but there are ?. However, the main idea is to explain the story behind it.
Here are more examples for your references:github.com/reactwg/rea…
startTransition is different setTimeout
As we discussed above, setTimeout
is Asynchronous but startTransition
is synchronous.
We can see that startTransition
doesn’t change the order of events, it is still there but it will “wait” urgent events to finish then it will execute, it is likemagic?. The React Core team makes it happen. ?
Asynchronous is hard, you have been told that we need to clearTimeout
whenever we use setTimeout
, it might make Javascript confused and we need to set the time when it executes and as humans, we won’t ever know what is the exact time to execute because different scenarios we might different time and we only set at one.
You watch Loki, if we don’t manage Asynchronous well, it might cause “multiverse” ?
Small changes sometimes will make big different
When you read until here, I hope you get the concept of startTransition
, the story behind it.
Generally speaking, you might not need to use startTransition
in your projects especially if you don’t work on enterprise projects. However, when Front End World is getting complex and our application becomes super application, startTransition
will play a big role there. As mentioned some of my articles that React Core Team starts invest in animation with startTransition
, SRR
, Suspense
, … are complementary, it will be good for you to know each part how does it work ?
Disclaimer Because startTransition
is very new, I could be wrong about some parts of it, free feel to leave the comment to correct me.
References:
Hope you enjoy the article, good luck!!!