javascript - setState con return en TYPESCRIPT

Ups, amigos, tengo este "problema" al usar setState, como setState no es asincrónico no puedo usarlo de la manera que quiero. Establezco el valor y cuando llamo a la función para devolver el valor regresa con "retraso". ¿Cómo puedo resolver esto?

  const [quantityProduct, setQuantityProduct] = useState<number>(0);

function addQuantity() {
    var soma = Number(quantityProduct) + 1;
    setQuantityProduct(soma);
    sendProduct()
}
  
function sendProduct() {
    console.log(quantityProduct)
}

Respuesta #1

El problema es que las siguientes dos líneas son asíncronas. Lo que experimentas es que la segunda línea se ejecuta antes de completar la primera.

setQuantityProduct(soma);
sendProduct();

Quisiste llamar a sendProduct cuando se actualice quantityProduct. Deberías usar el hook useEffect con quantityProduct en el array de dependencias.

Intenta como abajo.

  const [quantityProduct, setQuantityProduct] = useState<number>(0);
  function addQuantity() {
    var soma = Number(quantityProduct) + 1;
    setQuantityProduct(soma);
  }

  function sendProduct() {
    console.log(quantityProduct);
  }

  useEffect(() => {
    sendProduct();
  }, [quantityProduct]);

2.ª forma: llamar a la API dentro del callback de setState

  function addQuantity() {
    setQuantityProduct((prevQuantity) => {
      var newQuantity = Number(prevQuantity) + 1;
      sendProduct(newQuantity);
      return newQuantity;
    });
  }

Respuesta #2

setState no es asíncrono

Esto no es cierto. La documentación es clara al respecto:

React puede agrupar múltiples llamadas a setState() en una sola actualización para mejorar el rendimiento. Debido a que this.props y this.state pueden actualizarse de manera asincrónica, no debes confiar en sus valores para calcular el siguiente estado.

Necesitas usar el hook useEffect para observar cambios en el estado (pasando el estado que quieres observar en un arreglo de dependencias), y luego realizar una operación basada en ese cambio.

const [quantityProduct, setQuantityProduct] = useState(0);

function addQuantity() {
  const soma = Number(quantityProduct) + 1;
  setQuantityProduct(soma);
}

function sendProduct() {
  console.log(quantityProduct);
}

useEffect(() => {
  sendProduct();
}, [quantityProduct]);