title: I am using React Hook correctly?
body: <p>I want to apply React hook for <strong>infinite scroll</strong>. So, I end up with this code:</p>
  
  <pre><code>export default function index() {
    const [allTracks, setAllTracks] = useState([]);
    const [offset, setOffset] = useState("");
  
    const { tracks, error, loading, lastVisible } = useFetchPublicTracks(
      myApiEndPoint.TRENDING_TRACKS,
      5,
      offset
    );
  
    //concat tracks when got data successfully
    useEffect(() =&gt; {
      if (!loading &amp;&amp; tracks) setAllTracks([...allTracks, ...tracks]);
    }, [loading, tracks]);
  
    console.log("tracks", allTracks);
    console.log("lastVisible", lastVisible);
    console.log("loading", loading);
  
    return (
      &lt;div&gt;
        &lt;button className="" onClick={() =&gt; setOffset(lastVisible)}&gt;
          Load More
        &lt;/button&gt;
        &lt;Main&gt;&lt;/Main&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>When I click <strong>"Load More"</strong> button, new offset will be setted. After that, component re-render again and call Api with new offset. </p>
  
  <p>I want ask that <strong>I am using React hook correctly</strong> ? There is any way better ? Also, Do I need to use <strong>useCallback/useMemo</strong> in my use case ?</p>