En el siguiente ejemplo, si se hace clic en el botón "lento" inmediatamente seguido de un clic en el botón "rápido", dependsOnA primero se establecerá en "Resultado de la promesa rápida" ya que la promesa rápida se resuelve primero. Después de aproximadamente un segundo, la promesa lenta se resolverá y dependsOnA se establecerá en "Resultado de promesa lenta". Lo que realmente quiero es que el estado dependsOnA refleje siempre el estado actual de a archivo . Es decir, dependsOnA siempre debe obtener el valor "Resultado de promesa rápida" cuando a se establece en true y "Resultado de promesa lenta" cuando se establece a false .

¿Cuál es la mejor manera de lograr esto?

 import * as React from 'react'; const slowPromise: () => Promise<string> = () => { return new Promise((resolve) => { setTimeout(() => resolve('Result from slow promise'), 2000); }); }; const fastPromise: () => Promise<string> = () => { return new Promise((resolve) => { setTimeout(() => resolve('Result from fast promise'), 1000); }); }; export function Example(props: {}) { const [a, setA] = React.useState<boolean>(); const [dependsOnA, setDependsOnA] = React.useState<string>(); React.useEffect(() => { if (a) fastPromise().then(setDependsOnA); else slowPromise().then(setDependsOnA); }, [a]); return ( <div> <button onClick={() => setA(false)}>Slow</button> <button onClick={() => setA(true)}>Fast</button> {dependsOnA} </div> ); }

Se me ocurrió la siguiente solución que usa la devolución de llamada de limpieza del gancho useEffect para "cancelar" la actualización de estado después de que la promesa se haya resuelto si ha cambiado desde que se creó a promesa. Sin embargo, esta solución se siente un poco rara.

 React.useEffect(() => { let isCanceled: boolean = false; if (a) fastPromise().then((res) => { if (!isCanceled) setDependsOnA(res); }); else slowPromise().then((res) => { if (!isCanceled) setDependsOnA(res); }); return () => { isCanceled = true; }; }, [a]);