Transitions let you tell [React](/courses/reactjs) that a state update is **non-urgent** and can happen without blocking more important user interactions. The two main APIs are: ```text startTransition useTransition ``` ### Why Are Transitions Needed? Imagine a search page containing a very large result list. Every keystroke needs to do two things: ```text 1. Update the input 2. Render expensive search results ``` If the result rendering is expensive, typing can feel slow. The input update is urgent because users expect immediate feedback. The result update can be treated as less urgent. ### startTransition Example ```jsx import { startTransition, useState } from "react"; function SearchPage() { const [input, setInput] = useState(""); const [query, setQuery] = useState(""); function handleChange(event) { const value = event.target.value; setInput(value); startTransition(() => { setQuery(value); }); } return ( <> ); } ``` Here: ```text setInput(value) → urgent → keep typing responsive setQuery(value) → transition → rendering results can be treated as non-urgent ``` ### What Does startTransition Actually Do? It does not make a [function](/javascript/functions-in-javascript) execute after a fixed delay. It marks state updates performed synchronously inside its callback as transition work. Conceptually: ```text startTransition(() => { update state }) ↓ React knows this update is non-urgent rendering work ``` ### useTransition `useTransition` provides the same transition concept plus information about whether transition work is pending. ```jsx import { useTransition } from "react"; function Tabs() { const [tab, setTab] = useState("home"); const [isPending, startTransition] = useTransition(); function selectTab(nextTab) { startTransition(() => { setTab(nextTab); }); } return ( <> {isPending && Loading...} ); } ``` ### startTransition vs useTransition ```text startTransition → mark an update as a Transition → useful when pending state is not needed useTransition → provides startTransition → also gives isPending ``` ### Transitions Do Not Delay State with setTimeout This: ```jsx startTransition(() => { setPage("dashboard"); }); ``` is not equivalent to: ```jsx setTimeout(() => { setPage("dashboard"); }, 1000); ``` A timeout delays execution by time. A Transition communicates update priority to [React](/courses/reactjs). ### Do Not Use Transitions for Controlled Input State Avoid marking the state directly controlling the input value as a Transition: ```jsx startTransition(() => { setInput(event.target.value); }); ``` Controlled inputs should respond synchronously to user typing. Instead, keep the input state urgent and transition the expensive derived UI. ### Transitions Do Not Automatically Make Slow Code Fast Suppose: ```javascript function calculateResults() { // extremely expensive JavaScript } ``` `startTransition` does not magically reduce the amount of computation. It helps React schedule rendering work so urgent updates can remain responsive. You may still need other optimizations for genuinely expensive calculations. ### Interview-Ready Answer Transitions mark React state updates as non-urgent so urgent interactions can remain responsive while more expensive UI updates are rendered. `startTransition` marks transition updates, while `useTransition` additionally provides an `isPending` state. Transitions are about rendering priority, not time delays, and should not be used for the state directly controlling text inputs.