title: react hook useEffect to fetch data on button click (typescript)
body: <p>I have a component and I want to fetch isbn data on button click using react hook useEffect, performing a <code>get</code> on the route <code>${basicUrl}/editorials/${isbn}</code>, so i wrote this component:</p>
  <pre class="lang-js prettyprint-override"><code>import React, { Fragment, useState } from &quot;react&quot;;
  import &quot;./Home.css&quot;;
  import { V3_BASIC_URL } from &quot;../../constants/endpoints&quot;;
  import { useDataApi } from &quot;../../store/effects/dataEffects&quot;;
  
  import SearchIsbnElement from &quot;../../components/SearchIsbnElement/SearchIsbnElement&quot;;
  import IsbnPanelElement from &quot;../../components/IsbnPanelElement/IsbnPanelElement&quot;;
  
  function Home() {
    const [query, setQuery] = useState&lt;string&gt;(&quot;9788808677853&quot;);
    const [isValid, setIsValid] = useState&lt;boolean&gt;(true);
  
    const url = `${V3_BASIC_URL(
      process.env.REACT_APP_API_ENV
    )}/editorials/${query}`;
    const [{ isbn, isLoading, isError }, doFetch] = useDataApi(url, {
      isLoading: false,
      isError: false,
      isbn: undefined,
    });
  
    const buttonCallback = () =&gt; {
      doFetch(url);
    };
    const isbnRegexp = /^97\d{11}$/
    const validateQuery = (query: string): boolean =&gt; isbnRegexp.test(query)
  
    const inputCallback = (query: string) =&gt; {
      setQuery(query)
      setIsValid(validateQuery(query));
    };
  
    return (
      &lt;div id=&quot;isbn-panel-home&quot; className=&quot;Home&quot;&gt;
        &lt;SearchIsbnElement
          inputCallback={inputCallback}
          buttonCallback={buttonCallback}
          query={query}
          isValid={isValid}
        &gt;&lt;/SearchIsbnElement&gt;
        {isError &amp;&amp; &lt;div&gt;Il servizio al momento non è disponibile, riprova più tardi&lt;/div&gt;}
        {isLoading ? (
          &lt;div&gt;Loading ...&lt;/div&gt;
        ) : (
          !isError &amp;&amp; 
          &lt;Fragment&gt;
            &lt;IsbnPanelElement isbn={isbn}&gt;&lt;/IsbnPanelElement&gt; 
            &lt;p&gt;{isbn?.scheda_volume == null &amp;&amp; 'isbn non trovato'}&lt;/p&gt;
          &lt;/Fragment&gt;
        )}
      &lt;/div&gt;
    );
  }
  
  export default Home;
  
  </code></pre>
  <p>the <code>useDataApi</code> function uses the hook useEffect and returns <code>state</code> and <code>setUrl</code> action to set the new url on isbn value change. This is the <code>useDataApi</code> file:</p>
  <pre class="lang-js prettyprint-override"><code>import { useState, useEffect, useReducer } from &quot;react&quot;;
  
  import {
    dataFetchFailure,
    dataFetchInit,
    dataFetchSuccess,
  } from &quot;../actions/dataActions&quot;;
  import { dataFetchReducer, ISBNState } from &quot;../reducers/dataReducers&quot;;
  import { get } from &quot;../../tools/request&quot;;
  
  type InitialState = {
    isLoading: boolean,
    isError: boolean,
    isbn: undefined,
  }
  
  export const useDataApi = (initialUrl: string, initialData: InitialState) : [ISBNState, (value: string) =&gt; void]  =&gt; {
    const [url, setUrl] = useState(initialUrl);
  
    const [state, dispatch] = useReducer(dataFetchReducer, initialData);
  
    useEffect(() =&gt; {
      let didCancel: boolean = false;
  
      const fetchData = async (): Promise&lt;any&gt; =&gt; {
        dispatch(dataFetchInit());
        const options = {
          headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json'
          },
          auth: {
            username: `${process.env.REACT_APP_API_AUTH_USER}`,
            password: `${process.env.REACT_APP_API_AUTH_PWD}`
          }
        }
        try {
          const {data} = await get(url, options);
          if (!didCancel) {
            dispatch(dataFetchSuccess(data));
          }
        } catch (error) {
          if (!didCancel) {
            dispatch(dataFetchFailure(error));
          }
        }
      };
  
      fetchData();
  
      return () =&gt; {
        didCancel = true;
      };
    }, [url]);
  
    return [state, setUrl];
  };
  </code></pre>
  <p>with this code fetching starts on page load, but i want to fetch data only on button click. How can I do this?</p>