Understanding the useTransition Hook in React

Today we’re going to talk about a React hook that can significantly improve the user experience in our applications: useTransition. This hook is part of the family of React hooks introduced in version 18 and is designed to handle state transitions more efficiently.

What is useTransition?

The useTransition hook allows us to mark certain state updates as transitions. This is useful when we want to differentiate between urgent updates (like text input in a form field) and non-urgent updates (like loading a list of search results).

How does it work?

The useTransition hook returns an array with two elements:

  1. startTransition: A function that we use to wrap the state updates we want to mark as transitions.
  2. isPending: A boolean that indicates if there is an ongoing transition.

Example of use

Let’s look at a practical example to better understand how useTransition works.

import React, { useState, useTransition } from 'react';

function SearchComponent() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [isPending, startTransition] = useTransition();

  const handleChange = (e) => {
    setQuery(e.target.value);
    startTransition(() => {
      // Simulamos una búsqueda que tarda un poco en completarse
      const newResults = performSearch(e.target.value);
      setResults(newResults);
    });
  };

  return (
    <div>
      <input type="text" value={query} onChange={handleChange} />
      {isPending ? <p>Loading...</p> : <ResultsList results={results} />}
    </div>
  );
}

function performSearch(query) {
  // Simulación de una búsqueda
  return ['result1', 'result2', 'result3'].filter(item => item.includes(query));
}

function ResultsList({ results }) {
  return (
    <ul>
      {results.map((result, index) => (
        <li key={index}>{result}</li>
      ))}
    </ul>
  );
}

export default SearchComponent;

Code Explanation

  1. State and hooks: We define three states: query to store the search query, results to store the search results, and isPending to know if there is an ongoing transition. We also get the startTransition function from the useTransition hook.
  2. Handling changes: In the input change handler, we update the query state immediately and then use startTransition to wrap the update of the search results. This marks the update of the results as a non-urgent transition.
  3. Conditional rendering: While isPending is true, we show a “Loading…” message. Once the transition ends, we show the list of results.

Benefits of using useTransition

  • Improved user experience: By differentiating between urgent and non-urgent updates, we can keep the user interface responsive even when performing costly operations.
  • Performance optimization: React can prioritize urgent updates and delay non-urgent ones, resulting in better resource management.