ReactJS - Hook customizado - useState() com Promise.

useStateWithPromise.js

import { useEffect, useRef, useCallback } from 'react';

const useStateWithPromise = (state, setState) => {
    const resolverRef = useRef(null);

    useEffect(() => {
        if (resolverRef.current) {
            resolverRef.current(state);
            resolverRef.current = null;
        }
        /**
         * Dado que uma atualização de estado pode ser disparada exatamente com o mesmo estado novamente, 
         * não é suficiente especificar o estado como a única dependência deste useEffect.
         * É por isso que o resolverRef.current também é uma dependência, porque vai garantir que o handler setNewState 
         * seja chamado na renderização anterior.
         */
    }, [resolverRef.current, state]);

    const setNewState = useCallback((newState) => {
        setState(newState);
        return new Promise(resolve => {
            resolverRef.current = resolve;
        });
    }, [setState])

    return [setNewState];
};

export default useStateWithPromise;

useStateWithPromise.md

useStateWithPromise

Esse script é um hook customizado para possibilitar a espera da execução de atualização de estados no ReactJS.

Exemplo de uso:

import React, {useState} from 'react';
import useStateWithPromise from 'useStateWithPromise.js';

function MyComponent() {

  const [myVariable, setMyVariable] = useState();
  const [setNewState] = useStateWithPromise(myVariable, setMyVariable);

  async function foo() {
    console.log(myVariable);
    await setNewState('bar');
    console.log(myVariable);
  }

  return (
    ...
  )
  
  export default MyComponent;
}