Questions a beginner might ask

[shrutikapoor08]

While going through the docs, I found some terminologies that I felt won't be familiar to people who are not very experienced with React. It would be helpful to break these down into simpler explanations -

1. What is a state transition and how do we know if the state transition is expensive?
2. useDeferredValue → How can we mark less important parts of the screen?
3. What is a sub-tree basis?

[sylwiavargas]

✅ I'm adding "state transition" (and the follow up q) and "sub-tree basis" as terms to #46

[gaearon]

What is a state transition and how do we know if the state transition is expensive?

Colloquially, a "state transition" is the same as a "state change". This is a state change:

setState(something);

Sometimes, setting state may lead to an "expensive" render. The way you can tell whether a render is "expensive" is by checking if the screen freezes. If you click on a button that sets state, and the button gets "stuck" for some time, and then gets "unstuck", this means that a bunch of code in your app had to run in between, and it took long enough for you to notice it. If React calling your components took longer than a single screen frame (~16ms) to run, the delay can be noticeable and hurt the user experience.

(A slightly more technical way to figure out which state changes are expensive is by using a tool like a Profiler.)

"State transition" is a colloquial term that's already in use, and React 18 builds on that usage to make it a formal concept in React. We don't often say "transition" in reference to something that's instant. We usually mean there's some kind of a delay. So this intuition matches how the React API is designed.

If you mark the state update as a transition:

startTransition(() => {
  setState(something);
})

then React will know that it might take a bit of time, and will treat it differently. In particular, it will not let the browser get "stuck", and instead will periodically let it handle new events (like typing) and even interrupt this transition with other state updates.

You might have thought of "transitions" as having something to do with animation. That's another common colloquial meaning. Today, startTransition is not related to animations, which might be a bit confusing. However, the longer term plan is to have that API serve as an opt-in to enabling animations for a state change (#41 (reply in thread)). This is why we don't mind the "clash" between two meanings. We think startTransition will represent both meanings in the future.

For more on startTransition, read #41.

useDeferredValue → How can we mark less important parts of the screen?

We have not added documentation for this API yet. We will add it in the coming weeks, so please bear with us!

What is a sub-tree basis?

I believe you're referring to this sentence from #4:

These features are opt-in on a sub-tree basis without enabling StrictMode for your entire app.

This is just confusing wording. "On a sub-tree basis" here means "for individual parts of the tree instead of the entire app". Here is how I would reword this sentence:

You can start using these features in a small part of your tree without enabling Strict Mode for your entire app.

I will edit that post. Hope this helps!

[shrutikapoor08]

Thanks a lot for the helpful answers. I agree this makes more sense - You can start using these features in a small part of your tree without enabling Strict Mode for your entire app.