React 18: Start Transition

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

Playground

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)
})
複製代碼

Playground

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:

• github.com/reactwg/rea…

Hope you enjoy the article, good luck!!!