title: Difference between React Custom Hooks and Regular Functions
body: <p>What is the difference between a regular JS function, a helper/service function and React Custom Hook?</p>
  <p>The similar answers I found didn't give any good examples, so I created this &quot;service&quot; function that I'll be using for example to list some users in an other Function Component :</p>
  <pre><code>import axios from &quot;axios&quot;;
  
  const useService = () =&gt; {
    const fields = [
      { key: &quot;name&quot;, _style: { width: &quot;40%&quot; } },
      { key: &quot;email&quot;, _style: { width: &quot;40%&quot; } },
    ];
  
    const getUsers = async () =&gt; {
      return await axios.get(&quot;http://127.0.0.1:8000/api/users&quot;);
    };
  
    const getBadge = (status) =&gt; {
      switch (status) {
        case &quot;Active&quot;:
          return &quot;success&quot;;
        case &quot;Inactive&quot;:
          return &quot;secondary&quot;;
        case &quot;Pending&quot;:
          return &quot;warning&quot;;
        case &quot;Banned&quot;:
          return &quot;danger&quot;;
        default:
          return &quot;primary&quot;;
      }
    };
  
    return { fields, getUsers, getBadge };
  };
  
  export default useService;
  </code></pre>
  <p>I called it <code>useService</code> but I didn't actually use any React hooks here like  <code>useEffect</code>, <code>useState</code> etc.. So is this function still a Custom Hook? Is it just a utility/helper function?</p>
  <p>What is the difference exactly when we talk about Custom Hooks &amp; Utility/Helper/Service/Normal Functions etc...</p>