Await startTransition

This issue has been created since 2022-11-07.

Is there a technical limitation that the startTransition function does not return a Promise, which I could await from an async handler that starts the transition?

I have a use case where I need to do some preparations before a transition, and clean it up afterwards.
Currently I assume the way to do this is like:

function Component() {
	let [isPending, startTransition] = useTransition();

	function handler() {
		// Preparations before the transition

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

	useEffect(() => {
		if (isPending === false) {
			// Cleanup after the transition
		}
	}, [isPending]);
}

To make this work in practice I would also need some ref or state to keep track of things I need to do the cleanup in the effect of the next render. Also if the handler is called before the transition was complete, we would also need to do the cleanup of the previous transition.
So in practice it would look more like this:

function Component() {
	let transitionContextRef = useRef();
	let [isPending, startTransition] = useTransition();

	function handler() {
		// Cleanup the previous unfinished transition

		// Prepare the new transition

		transitionContextRef.current = /* Everything we need for cleanup */

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

	useEffect(() => {
		if (isPending === false) {
			// Cleanup after the transition
		}
	}, [isPending]);
}

If startTransition would return a Promise which I could await this would all turn out to be much simpler:

function Component() {
	async function handler() {
		// Prepare transition

		await startTransition(() => { /* ... */ })

		// Cleanup after the transition
	}
}
  • the ref would not be needed
  • the effect would not be needed
  • the previous unfinished transition would not need to be cleaned up in the handler.
  • i could use startTransition directly instead of the useTransition hook
  • it would save 1 render, as the rerender caused by isPending would not occur.
  • the code would be shorter and considerably more readable

Would it be possible to have startTransition return a promise which would resolve when the transition is complete?

eps1lon wrote this answer on 2022-11-09

Feature requests like these are better described with a high level goal. Instead of asking for a particular implementation ("return promise"), try to describe what the UI should be doing (e.g. some animation, preloading etc).

subhero24 wrote this answer on 2022-11-09

The use case is mainly about preloading data.

I would like to cancel a fetch request for the preloaded data if the state transition did not finish.

Being able to await the transition would be nice, so I could abort the fetch request from the handler that started the preload, and invoked the transition if the transition was canceled.

As I understand there is currently no way to do this ...?

More Details About Repo
Owner Name facebook
Repo Name react
Full Name facebook/react
Language JavaScript
Created Date 2013-05-24
Updated Date 2022-12-01
Star Count 198482
Watcher Count 6646
Fork Count 41196
Issue Count 1106

YOU MAY BE INTERESTED

Issue Title Created Date Comment Count Updated Date
Is `app` a valid outputs key or not? 1 2021-12-22 2022-11-10
docker implementation fails when /enigma-bbs/art is mounted to an external folder 7 2022-01-24 2022-10-07
mrc module private msg only transfers one word. 2 2022-01-26 2022-10-10
Bam file : No EOF marker; file may be truncated 0 2022-07-19 2022-10-06
Backup and Restore commands 1 2016-12-08 2022-11-12
Come up with a name 0 2021-12-02 2021-12-15
Security Hub - AWS Foundational Security Best Practices v1.0.0 1 2022-06-28 2022-11-23
Build mac pre-m1 secp256k1 binaries 1 2021-11-30 2022-10-01
Add ability to reload configuration file 1 2021-03-05 2022-10-07
error installing sabnzbd via dietpi-software 11 2022-01-04 2022-10-17
NS_ERROR_DOM_BAD_URI on $empty filter rules 1 2022-11-23 2022-11-16
$popup doesn't work when redirection from http to https 3 2022-11-23 2022-11-16
Can’t override sourceType for a .ts file 0 2021-06-02 2022-10-30
Arbitrary recipient's email addresses are shown as empty values 0 2022-06-24 2022-10-09
"Introduction to ggplot2" vignette 1 2021-09-18 2022-11-28
Kubescape fails to scan kubernetes `List` object 1 2022-07-07 2022-11-03
Feature request: set_range() similar to set_row() and set_column() 1 2021-01-19 2022-10-29
Can't compile with TypeScript out of the box 8 2022-02-15 2022-11-12
Secondary Mech 5 2022-01-10 2022-01-14
Upgrading to version 3.13.0 results in error: collection is not iterable 5 2022-04-27 2022-10-10
[BGF] audio stream can not switch to earpiece fixed. 0 2021-08-18 2022-02-24
[Bug]: Milvus proxy pod always not ready when add deployment health check 4 2021-10-12 2022-11-22
syntax highlighting containerfile 2 2022-07-13 2022-11-10
Add `--recursive` param in `m365 spo folder list` 10 2021-10-17 2022-10-17
Dependency Dashboard 0 2021-10-18 2022-10-09
[BUG] Stuck syncing 1,075,669 7 2021-11-01 2022-11-18
Document maximum message / payload size 4 2021-10-15 2022-09-17
Pointer `IsInRange` property does not match WinUI behavior 0 2021-11-09 2022-10-28
intermittent timeout errors throughout the day 2 2021-07-29 2022-11-19
[Rendering] Input.Text missing spell-check options 1 2021-09-16 2022-10-24
Radio buttons are broken in Angular submission 1 2022-04-27 2022-11-06
Add breadcrumb navigation to the Scene tree dock 1 2022-10-20 2022-11-05
worldspace 模式下的透明问题 2 2022-01-15 2022-01-13
Why is this only for the China version of unity ? 9 2022-01-18 2022-11-04
Comment list does not update after comment editing in details. 1 2021-09-30 2022-10-31
Warnings for Newtonsoft.Json Serialization Errors in Unity 10 2018-06-25 2022-11-16
onTick Callback 1 2019-11-25 2022-01-10
Question about the intended behavior of Accuracy with `average="none"` and `nan` results 1 2021-08-27 2022-10-01
jQuery version in built site 1 2022-02-22 2022-11-26
RetainCycle issue! 6 2019-08-30 2022-01-14
appmesh-prometheus chart deployment fails on EKS with Kubernetes Version 1.22 1 2022-05-06 2022-11-17
Text appears on the left side (crashes in some cases) 2 2022-10-08 2022-11-09
EKS bootstrap: --enable-docker-bridge is not working 7 2021-07-28 2022-11-27
Provide CloudEvents around failed authentications for scaling triggers 0 2022-08-09 2022-09-23
Auto-completion forbids paths completion 1 2022-10-01 2022-10-20
Support strings validation using `ValidateFunc` from the resource schema 2 2022-10-01 2022-10-20
Output capture does not filter newlines 0 2017-07-10 2022-09-21
ETCD Bind to DNS-Name instead of IP 5 2021-06-10 2022-11-21
409 error hitting /api/exception_lists on various screens across Kibana 28 2022-07-29 2022-10-29
Support traffic filters 0 2021-01-26 2022-11-23