How to send request on click React Hooks way?

Question

How to send http request on button click with react hooks? Or, for that matter, how to do any side effect on button click?

What i see so far is to have something "indirect" like:

export default = () => {   const [sendRequest, setSendRequest] = useState(false);    useEffect(() => {     if(sendRequest){        //send the request        setSendRequest(false);     }   },   [sendRequest]);    return (     <input type="button" disabled={sendRequest} onClick={() => setSendRequest(true)}   ); } 

Is that the proper way or is there some other pattern?

Answer 1

export default () => {   const [isSending, setIsSending] = useState(false)   const sendRequest = useCallback(async () => {     // don't send again while we are sending     if (isSending) return     // update state     setIsSending(true)     // send the actual request     await API.sendRequest()     // once the request is sent, update state again     setIsSending(false)   }, [isSending]) // update the callback if the state changes    return (     <input type="button" disabled={isSending} onClick={sendRequest} />   ) } 

this is what it would boil down to when you want to send a request on click and disabling the button while it is sending

update:

@tkd_aj pointed out that this might give a warning: "Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function."

Effectively, what happens is that the request is still processing, while in the meantime your component unmounts. It then tries to setIsSending (a setState) on an unmounted component.

export default () => {   const [isSending, setIsSending] = useState(false)   const isMounted = useRef(true)    // set isMounted to false when we unmount the component   useEffect(() => {     return () => {       isMounted.current = false     }   }, [])    const sendRequest = useCallback(async () => {     // don't send again while we are sending     if (isSending) return     // update state     setIsSending(true)     // send the actual request     await API.sendRequest()     // once the request is sent, update state again     if (isMounted.current) // only update if we are still mounted       setIsSending(false)   }, [isSending]) // update the callback if the state changes    return (     <input type="button" disabled={isSending} onClick={sendRequest} />   ) }