The useTransition hook in React is used to manage transitions between UI states, especially for updates that can be deferred without blocking the UI. It’s perfect for handling non-urgent updates like filtering large lists, navigation, or loading content while maintaining a responsive interface.

It helps in distinguishing between urgent updates (like text input) and non-urgent updates (like rendering filtered data), improving the user experience.

Introduced in: React 18 (for concurrent features)

✅ Basic Usage of useTransition

import { useState, useTransition } from 'react';

const FilterList = ({ items }) => {
const [query, setQuery] = useState('');
const [filteredItems, setFilteredItems] = useState(items);
const [isPending, startTransition] = useTransition();

const handleChange = (e) => {
const value = e.target.value;
setQuery(value);

// Non-urgent update starts here
startTransition(() => {
const filtered = items.filter((item) =>
item.toLowerCase().includes(value.toLowerCase())
);
setFilteredItems(filtered);
});
};

return (
<div>
<input type="text" value={query} onChange={handleChange} placeholder="Search..." />
{isPending && <p>Loading...</p>}
<ul>
{filteredItems.map((item) => (
<li key={item}>{item}</li>
))}
</ul>
</div>
);
};

⚡ How It Works:

1. useTransition() returns:

   • isPending: A boolean indicating if the transition is ongoing.
   • startTransition(callback): A function to wrap non-urgent state updates.

2. In the example above:

   • Typing in the input triggers two updates:
     • Immediate update: setQuery(value) for the input field (urgent).
     • Deferred update: startTransition() wraps the filtering logic (non-urgent).

3. Result:

   • The input stays responsive even if filtering takes time.
   • A Loading… message is shown during the transition.

🛠️ When to Use useTransition:

1. Filtering/Search:

   • For large datasets where filtering is expensive.

2. Navigation:

   • When switching between pages/views with heavy content.

3. Form Updates:

   • For auto-suggestions or complex form state changes.

4. Rendering Expensive Components:

   • Deferring rendering of complex UI components while keeping the app interactive.

🚀 Advanced: Controlling Priority with useDeferredValue

React also offers useDeferredValue for similar use cases.

import { useState, useDeferredValue } from 'react';

const DeferredList = ({ items }) => {
const [query, setQuery] = useState('');
const deferredQuery = useDeferredValue(query);

const filteredItems = items.filter((item) =>
item.toLowerCase().includes(deferredQuery.toLowerCase())
);

return (
<div>
<input type="text" value={query} onChange={(e) => setQuery(e.target.value)} />
<ul>
{filteredItems.map((item) => (
<li key={item}>{item}</li>
))}
</ul>
</div>
);
};

• useDeferredValue defers the value without requiring a startTransition.
• Good for simple scenarios like search inputs or live filtering.

💡 Key Differences: