title: custom hook not firing on click
body: <p>I've created a custom hook to fetch data and am trying to implement it, but to no avail.</p>
  <p>This is my custom hook:</p>
  <pre><code>import { useReducer } from &quot;react&quot;;
  import axios from &quot;axios&quot;;
  
  const dataFetchReducer = (state, action) =&gt; {
    switch (action.type) {
      case &quot;FETCH_INIT&quot;:
        return {
          ...state,
          isLoading: true,
          isError: false,
        };
      case &quot;FETCH_SUCCESS&quot;:
        return {
          ...state,
          isLoading: false,
          isError: false,
          data: action.payload,
        };
      case &quot;FETCH_FAILURE&quot;:
        return {
          ...state,
          isLoading: false,
          isError: true,
        };
      default:
        throw new Error();
    }
  };
  
  const useApi = (method) =&gt; {
    const [state, dispatch] = useReducer(dataFetchReducer, {
      isLoading: false,
      isError: false,
      data: null,
    });
  
    axios.defaults.baseURL = &quot;https://code-portfolio-f44c5.firebaseio.com&quot;;
  
    const fetchData = async (url, data) =&gt; {
      dispatch({ type: &quot;FETCH_INIT&quot; });
  
      try {
        const result = await axios[method](url, JSON.parse(data));
  
        dispatch({ type: &quot;FETCH_SUCCESS&quot;, payload: result.data });
      } catch (error) {
        dispatch({ type: &quot;FETCH_FAILURE&quot; });
      }
    };
  
    return [state, fetchData];
  };
  
  export default useApi;
  </code></pre>
  <p>and this is the modal where I want it to be fired onClick:</p>
  <pre class="lang-js prettyprint-override"><code>const [{ data, isLoading, isError }, doFetch] = useApi(&quot;post&quot;);
  
  function createSnippet(e) {
    doFetch(`/snippets/${framework}.json`, {
      description: description,
      category: category,
      title: title,
      snippet: snippet,
    });
    e.preventDefault();
  }
  
  return (
    &lt;Modal
      isOpen={modalIsOpen}
      shouldCloseOnOverlayClick={true}
      onRequestClose={() =&gt; setIsOpen(false)}
      style={modalStyles}
      onAfterClose={resetStateVariables}
    &gt;
      &lt;ModalContainer&gt;
        &lt;HeaderContainer&gt;
          &lt;Header&gt;Add a snippet&lt;/Header&gt;
        &lt;/HeaderContainer&gt;
        &lt;BodyContainer&gt;
          &lt;Form&gt;
            &lt;InputContainer&gt;
              &lt;LabelledSelect
                label=&quot;Select framework&quot;
                options={frameworkOptions}
                onChange={(e) =&gt; setFramework(e.target.value)}
                value={framework}
              /&gt;
            &lt;/InputContainer&gt;
            &lt;InputContainer&gt;
              &lt;LabelledSelect
                label=&quot;Select category&quot;
                options={categoryOptions}
                onChange={(e) =&gt; setCategory(e.target.value)}
                value={category}
              /&gt;
            &lt;/InputContainer&gt;
            &lt;InputContainer&gt;
              &lt;LabelledTextInput
                value={title}
                onChange={(e) =&gt; setTitle(e.target.value)}
                label=&quot;Title&quot;
                placeholder=&quot;What's the title of this snippet?&quot;
              /&gt;
            &lt;/InputContainer&gt;
            &lt;InputContainer&gt;
              &lt;LabelledTextarea
                label=&quot;Describe your snippet&quot;
                value={description}
                onChange={(e) =&gt; setDescription(e.target.value)}
                placeholder=&quot;What does your snippet do?&quot;
              /&gt;
            &lt;/InputContainer&gt;
            &lt;InputContainer&gt;
              &lt;AceEditor
                mode=&quot;javascript&quot;
                theme=&quot;twilight&quot;
                onChange={setSnippet}
                editorProps={{ $blockScrolling: true }}
                setOptions={{
                  enableBasicAutocompletion: true,
                  enableLiveAutocompletion: true,
                  enableSnippets: true,
                }}
                width=&quot;100%&quot;
                height=&quot;200px&quot;
                value={snippet}
              /&gt;
            &lt;/InputContainer&gt;
            &lt;Button onClick={createSnippet}&gt;Create snippet&lt;/Button&gt;
          &lt;/Form&gt;
        &lt;/BodyContainer&gt;
      &lt;/ModalContainer&gt;
    &lt;/Modal&gt;
  );
  </code></pre>
  <p>So what happens, is actually just nothing. When I try to check what's happing and insert a console.log(&quot;check&quot;) in the try block I do see it appearing in my console. But no network request or anything. What am I doing wrong?</p>