title: How to pass state data from custom hooks to react component?
body: <p>I have custom hook(<code>useFetch</code>) that takes URL as input and fetch data from that URL and returns data. I want to implement spinner (already made <code>Spinner</code> component ) on my other components and I tried by making state for the <code>isLoading</code> and <code>setIsLoading</code> of spinner. 
  my custom hook code:</p>
  
  <pre><code>import { useState, useEffect } from 'react';
  
      const useFetch = (url) =&gt; {
        const [dataArray, setData] = useState([]);
        const [isLoading, setIsLoading] = useState(false);
        useEffect(() =&gt; {
          try {
            const fetchData = async () =&gt; {
              setIsLoading(true);
              const res = await fetch(url);
              const dataArray = await res.json();
              setData(dataArray.data);
            };
            fetchData();
          } catch (err) {
            console.error(err);
          }
          setIsLoading(false);
        }, [url]);
  
        return dataArray;
      };
  
      export default useFetch;
  </code></pre>
  
  <p>This is the component that I want to implement spinner. </p>
  
  <pre><code>import React, { useState } from 'react';
  import CONSTANTS from '../../constants/constants';
  import CompanyLists from '../../components/company-lists/CompanyLists';
  import Pagination from '../../components/pagination/Pagination';
  import useFetch from '../../components/effects/use-fetch.effect';
  import Spinner from '../../components/spinner/Spinner';
  const CompanyListing = () =&gt; {
    const [counter, setCounter] = useState(1);
    const companies = useFetch(`${CONSTANTS.BASE_URL}/companies?page=${counter}`);
  
    return (
      &lt;&gt;
        &lt;Container&gt;
          &lt;div style={userStyle}&gt;
            {companies ? companies.map((company) =&gt; &lt;CompanyLists key={company.id} {...company} /&gt;) : 'No companies'}
          &lt;/div&gt;
          &lt;Pagination props={companies} counter={counter} name="companies" setCounter={setCounter} /&gt;
          &lt;Spinner /&gt;
        &lt;/Container&gt;
      &lt;/&gt;
    );
  };
  const userStyle = {
    display: 'grid',
    gridTemplateColumns: 'repeat(1, 1fr)',
    gridGap: '1rem',
  };
  export default CompanyListing;
  </code></pre>
  
  <p>Problem here is: How can I send those loading state from hook to <code>CompanyListing</code> component. Any help will be appreciated. </p>
  
  <p>EDIT:</p>
  
  <p>I have other component that also calls same hook and I want them not to be broken. As I didn't mention on original question . 
  My another case:</p>
  
  <pre><code>const jobsUrl = `${CONSTANTS.BASE_URL}/jobs?page=${counter}`;
    const jobs = useFetch(jobsUrl);
  </code></pre>
  
  <p>AND </p>
  
  <pre><code>const { city, company_name, company_id, department, description, job_type, position, posted_at, url } = useFetch(
      `${CONSTANTS.BASE_URL}/jobs/${id}`
    );
  </code></pre>
  
  <p>How can I destructure in these two cases ?</p>