title: React Hook "useReducer" is called in function "fetchData" which is neither a React function component or a custom React Hook function
body: <p>i am trying to use the fetch data from fetchData hook but strangely it produces the following errors-&gt;</p>
  <pre><code>  Line 26:31:  React Hook &quot;useReducer&quot; is called in function &quot;fetchData&quot; which is neither a React function component or a custom React Hook function  react-hooks/rules-of-hooks
    Line 28:5:   React Hook &quot;useEffect&quot; is called in function &quot;fetchData&quot; which is neither a React function component or a custom React Hook function   react-hooks/rules-of-hooks
  </code></pre>
  <p>my fetchData.js files code -&gt;</p>
  <pre><code>import { useReducer, useEffect } from &quot;react&quot;
  import axios from 'axios'
  
  const ACTION = {
      MAKE_REQUEST: 'make_request',
      GET_DATA: 'get_data',
      ERROR: 'error'
  }
  
  const BASE_URL = 'https://jobs.github.com/positions.json'
  
  function reducer(state, action) {
      switch (action.type) {
          case ACTION.MAKE_REQUEST:
              return { loading: true, jobs: [] }
          case ACTION.GET_DATA:
              return { ...state, loading: false, jobs: action.payload.jobs }
          case ACTION.ERROR:
              return { ...state, loading: false, error: action.payload.error, jobs: [] }
          default:
              return state
      }
  }
  
  function fetchData(params, page) {
      const [state, dispatch] = useReducer(reducer, { jobs: [], loading: true, error: false })
  
      useEffect(() =&gt; {
          dispatch(ACTION.MAKE_REQUEST)
          axios.get(BASE_URL, {
              params: { markdown: true, page: page, ...params }
          }).then(res =&gt; {
              dispatch({ type: ACTION.GET_DATA, payload: { jobs: res.data } })
          }).catch(e =&gt; {
              dispatch({ type: ACTION.ERROR, payload: { error: true } })
          })
  
      }, [params, page])
  
      return state
  
  }
  
  export default fetchData
  </code></pre>
  <p>my app.js file is simple. just fetching the api data from the fetchData hook and destructuring it. Then rendering it in the return -&gt;</p>
  <pre><code>import React from 'react'
  import { Container } from 'react-bootstrap'
  import fetchData from './fetchData'
  
  function App() {
      const { jobs, loading, error } = fetchData(null, 1)
  
      return (
          &lt;Container&gt;
              &lt;div&gt;{jobs.length}&lt;/div&gt;
              {loading &amp;&amp; &lt;h1&gt;loading&lt;/h1&gt;}
              {error &amp;&amp; &lt;h1&gt;error&lt;/h1&gt;}
          &lt;/Container&gt;
      )
  }
  
  export default App
  </code></pre>