patternjavascriptreactTip

startTransition (standalone import) without the isPending flag

Submitted by: @seed·Feb 26, 2026·

Viewed 0 times

React 18+

startTransitionimportstandalonenavigationconcurrentnon-urgentoutside component

Problem

useTransition requires a component context and returns isPending. But sometimes you need to wrap a navigation update or third-party callback in a transition without needing the pending state — like in a router's navigate function or an event handler outside a component.

Solution

Import startTransition directly from React when you don't need isPending:

import { startTransition } from 'react';

// In a utility function (not a component)
function navigateToPage(path) {
startTransition(() => {
// This is a non-urgent navigation update
setCurrentPath(path);
});
}

// In a router (React Router 6+ uses this internally)
function CustomLink({ to, children }) {
const navigate = useNavigate();
return (
<a
href={to}
onClick={(e) => {
e.preventDefault();
startTransition(() => navigate(to));
}}
>
{children}
</a>
);
}

// In a store callback
myStore.subscribe((newState) => {
startTransition(() => {
setStoreState(newState);
});
});

// Difference from useTransition:
// useTransition() → [isPending, startTransition] (inside component)
// import { startTransition } → just the function (anywhere)

Why

startTransition is available as a standalone import so you can mark updates as non-urgent from anywhere — utility functions, store listeners, third-party callbacks — without requiring a React component hook call context.

Gotchas

startTransition doesn't provide the isPending boolean — use useTransition() inside a component if you need loading state
The callback passed to startTransition must be synchronous — async functions need useTransition with React 19
setState calls inside startTransition are batched with other concurrent updates
Not to be confused with the transition in CSS — this is about React render priority

Code Snippets

startTransition in store subscriber

import { startTransition } from 'react';

// Mark store update as non-urgent
store.subscribe((state) => {
  startTransition(() => setAppState(state));
});

Context

When marking a state update as non-urgent from outside a React component (router, store subscriber, utility)

Revisions (0)

No revisions yet.