=> {  
    
    
      startTransition(() => {  
    
    
        // ✅ Setting state *during* startTransition call  
    
    
        setPage('/about');  
    
    
      });  
    
    
    }, 1000);

Similarly, you can’t mark an update as a Transition like this:

    
    
    startTransition(async () => {  
    
    
      await someAsyncFunction();  
    
    
      // ❌ Setting state *after* startTransition call  
    
    
      setPage('/about');  
    
    
    });

However, this works instead:

    
    
    await someAsyncFunction();  
    
    
    startTransition(() => {  
    
    
      // ✅ Setting state *during* startTransition call  
    
    
      setPage('/about');  
    
    
    });

* * *

###  I want to call ` useTransition ` from outside a component

You can’t call ` useTransition ` outside a component because it’s a Hook. In
this case, use the standalone [ ` startTransition `
](/reference/react/startTransition) method instead. It works the same way, but
it doesn’t provide the ` isPending ` indicator.

* * *

###  The function I pass to ` startTransition ` executes immediately

If you run this code, it will print 1, 2, 3:

    
    
    console.log(1);  
    
    
    startTransition(() => {  
    
    
      console.log(2);  
    
    
      setPage('/about');  
    
    
    });  
    
    
    console.log(3);

**It is expected to print 1, 2, 3.** The function you pass to `
startTransition ` does not get delayed. Unlike with the browser ` setTimeout `
, it does not run the callback later. React executes your function
immediately, but any state updates scheduled _while it is running_ are marked
as Transitions. You can imagine that it works like this:

    
    
    // A simplified version of how React works  
    
    
      
    
    
    let isInsideTransition = false;  
    
    
      
    
    
    function startTransition(scope) {  
    
    
      isInsideTransition = true;  
    
    
      scope();  
    
    
      isInsideTransition = false;  
    
    
    }  
    
    
      
    
    
    function setState() {  
    
    
      if (isInsideTransition) {  
    
    
        // ... schedule a Transition state update ...  
    
    
      } else {  
    
    
        // ... schedule an urgent state update ...  
    
    
      }  
    
    
    }

[ Previous  useSyncExternalStore  ](/reference/react/useSyncExternalStore) [
Next  Components  ](/reference/react/components)

* * *

How do you like these docs?

[ Take our survey!  ](https://www.surveymonkey.co.uk/r/PYRPF3X)

* * *

[ ](https://opensource.fb.com/)

©  2024

[ Learn React ](/learn)

[ Quick Start ](/learn)

[ Installation ](/learn/installation)

[ Describing the UI ](/learn/describing-the-ui)

[ Adding Interactivity ](/learn/adding-interactivity)

[ Managing State ](/learn/managing-state)

[ Escape Hatches ](/learn/escape-hatches)

[ API Reference ](/reference/react)

[ React APIs ](/reference/react)

[ React DOM APIs ](/reference/react-dom)

[ Community ](/community)

[ Code of Conduct
](https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md)

[ Meet the Team ](/community/team)

[ Docs Contributors ](/community/docs-contributors)

[ Acknowledgements ](/community/acknowledgements)

More

[ Blog ](/blog)

[ React Native ](https://reactnative.dev/)

[ Privacy ](https://opensource.facebook.com/legal/privacy)

[ Terms ](https://opensource.fb.com/legal/terms/)

[ ](https://www.facebook.com/react) [ ](https://twitter.com/reactjs) [
](https://github.com/facebook/react)

##  On this page

  * Overview 
  * Reference 
  * ` useTransition() `
  * ` startTransition ` function 
  * Usage 
  * Marking a state update as a non-blocking Transition 
  * Updating the parent component in a Transition 
  * Displaying a pending visual state during the Transition 
  * Preventing unwanted loading indicators 
  * Building a Suspense-enabled router 
  * Displaying an error to users with an error boundary 
  * Troubleshooting 
  * Updating an i