Non-Blocking UI with useTransition

Snippet

Non-Blocking UI with useTransition

useTransition allows you to mark state updates as non-blocking 'transitions'. This ensures that urgent updates (like typing in an input) remain responsive while slower updates (like filtering a large list) happen in the background.

snippet.js
javascript
import { useState, useTransition } from 'react';
 
export function FilterableList({ items }) {
  const [isPending, startTransition] = useTransition();
  const [filter, setFilter] = useState('');
 
  const handleChange = (e) => {
    const val = e.target.value;
    setFilter(val); // High priority update
    startTransition(() => {
      // Lower priority update
      // Expensive filtering logic here
    });
  };
 
  return <input type="text" onChange={handleChange} />;
}

nextjs

Breakdown

const [isPending, startTransition] = useTransition();

Returns a pending state and a function to start a transition.

startTransition(() => { ... });

Wraps the low-priority state update to prevent UI blocking.

isPending

Can be used to show a loading indicator during the transition.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Non-Blocking UI with useTransition

Related