score:3

Accepted answer
const usehttpreqhandler = () => {
    const [result, setresult] = usestate();
    const [loading, setloading] = usestate(false);

    const apimethod = usecallback(async ({url , data , method}) => {
        let options = {
            method,
            url,
            headers: {
                'accept': 'application/json',
                'content-type': 'application/json;charset=utf-8'
            },
            data
        };

        setloading(true);


        try {
          let response = await axios(options);
          const updateddata = await response.data;
          setresult(updateddata);

          setloading(false);
        } catch (e) {
          console.error(e)
          setloading(false);
        }

    }, [setloading, setresult])

    return [loading, result , apimethod];
};

and then show a spinner in your component while loading is true.

untested and probably not working, but you might get the idea:

const mycomponent = () => {
    const [loading, apiresult,  apimethod] = usehttpreqhandler();


    const captchvalidation = usecallback(() => {
        const x = result.tostring();
        const y = inputvalue.tostring();

        apimethod({url: 'your url', data: {"email": email}, method: 'post'})

        if (x === y) {
            console.log("entered here in api part")
            if(apiresult){
             alert("success")
            }
        }
        else {
             alert("fail")
        }
    }, [apimethod, apiresult])

    return (
        <>
            {
                loading ? (<spinner />) : (<button onclick={captchvalidation}></button>)
            }
        </>
    )
}

Related Query

More Query from same tag