useTransition and startTransition Hooks

The Essence of Urgent Updates

Urgent updates in React are all about immediate, real-time responses to user interactions. These interactions include activities like typing, clicking, pressing buttons, and so on.

React handles urgent updates promptly to align with our natural expectations of how physical objects behave in the real world. When we type, we anticipate instant feedback, and if we don’t get it, it can feel jarring and unnatural.

Transition Updates: A Different Perspective

On the flip side, transition updates in React are designed to smoothly transition the user interface from one view to another.

This is where things get interesting. Unlike urgent updates, which demand immediate action, transitions are more forgiving. Users don’t expect to see every intermediate step in a transition on the screen. Instead, they are focused on the final result.

Balancing Urgent and Non-Urgent Updates

To illustrate this concept, consider the example of selecting a filter in a dropdown menu. When you click on a filter, you expect the filter button to respond immediately. This is the urgent update in action.

However, what happens behind the scenes, like filtering the results, can be treated as a transition. Here’s where the magic of React’s transition handling comes into play. A small delay during the transition is often imperceptible and quite normal. If you decide to change the filter again before the results are fully rendered, you’re primarily interested in seeing the latest results.

Leveraging the startTransition API

For a top-notch user experience, it’s essential to strike a balance between urgent and non-urgent updates. React provides a tool to help achieve this harmony – the startTransition API.

By using this API inside an input event, you can inform React which updates are urgent and which ones are “transitions.”

This elegant feature empowers developers to create interfaces that feel responsive and intuitive, just like the physical world.

import {startTransition} from 'react';

// Urgent: Show what was typed
setNewInputValue(input);

// Mark any state updates inside as transitions
startTransition(() => {
  // Transition: Show the results
  setSearchQuery(input);
});

What is startTransition?

startTransition is a valuable addition to React’s arsenal of tools for managing updates. It is a hook that allows developers to initiate transitions smoothly.

These transitions can include changes in the application’s state or user interface elements. By using startTransition, developers can define a value to track the pending state changes, making it a versatile tool for managing asynchronous updates.

The Role of startTransition

React acknowledges that not all updates are created equal. Some updates are considered non-urgent and can be deferred to prioritize more critical user interactions.

This is where startTransition comes into play. It ensures that non-urgent updates are handled gracefully and will not disrupt the user experience.

Concurrent Rendering and Interruption

One of the key aspects of startTransition is its ability to opt-in to concurrent rendering. This means that React allows updates to be interrupted if necessary. For example, if a user initiates more urgent actions, such as clicking or typing rapidly, React can interrupt ongoing non-urgent updates to prioritize these interactions.

This ensures that the user interface remains responsive and doesn’t become unresponsive or laggy due to less important tasks.

Handling Interruptions

React’s approach to handling interruptions is both efficient and user-friendly. If a transition initiated by startTransition gets interrupted by the user, React will discard any rendering work that wasn’t completed and render only the latest update.

This approach prevents users from experiencing visual glitches or erratic behavior in the application.

Transitions and Suspense

Transitions that are initiated using startTransition also work in tandem with React’s Suspense mechanism. This means that when a transition is in progress and the content is re-suspended, React continues displaying the current content while rendering the transition content in the background.

This ensures that users don’t experience empty or broken views during state updates, creating a smoother and more polished user experience.

How to use useTransition

Call the useTransition function at the top level of your component to designate certain state updates as transitions. useTransition itself doesn’t require any parameters.

useTransition returns an array consisting of two items:

1. The isPending flag, which indicates if there’s a pending transition.
2. The startTransition function, which allows you to flag a state update as a transition.

import { useTransition } from 'react';

function TabContainer() {
  const [isPending, startTransition] = useTransition();
  // ...
}

startTransition function: The startTransition function, obtained through useTransition, enables you to label a state update as a transition. The startTransition function takes the scope as parameter and does not return anything.

• scope: A function that modifies some state by calling one or more set functions. When you invoke scope without any parameters, React immediately executes it and marks all state updates scheduled synchronously during the scope function call as transitions. These transitions are non-blocking and won’t trigger unwanted loading indicators.

function Container() {
  const [isPending, startTransition] = useTransition();
  const [page, setPage] = useState('contact');

  function selectPage(nextPage) {
    startTransition(() => {
      setPage(nextPage);
    });
  }
  // ...
}

Transitions ensure that your user interface remains responsive, even on slower devices.

By implementing transitions, your UI maintains its responsiveness even in the midst of a re-render. For instance, if a user clicks on one page but then changes their mind and clicks on another, they can do so without having to wait for the initial re-render to complete.

 

Conclusion

• useTransition is a Hook, so it’s only valid within components or custom Hooks. If you need to initiate a transition from a different location, like a data library, you should call the standalone startTransition instead.
• You can only wrap an update into a transition if you have access to the set function of that state. If you intend to initiate a transition based on a prop or a custom Hook value, consider using useDeferredValue instead.
• The function you provide to startTransition must be synchronous. React instantly executes this function, marking all state updates during its execution as transitions. Any subsequent state updates you try to perform (e.g., within a timeout) won’t be considered as transitions.
• A state update marked as a transition can be interrupted by other state updates. For example, if you’re updating a chart component during a transition and then begin typing into an input while the chart is in the middle of a re-render, React will restart the rendering work on the chart component after handling the input update.
• Transition updates cannot be used to control text inputs.
• When multiple transitions are ongoing, React currently batches them together. This limitation is expected to be addressed in a future release.