[React]Hooks를 사용하여 무한 스크롤 구현

import React, { FC, useEffect } from 'react';
// setPageNumber でページを変えると fetch してくる hook。取得してきたものは beers にたまっていく
import useBeers from 'hooks/useBeers';
import lodash from 'lodash';

const InfiniteScroll: FC = () => {
  const { beers, setPageNumber } = useBeers();

  // 一番下に到達したら setPageNumber でページを更新
  const handleScroll = lodash.throttle(() => {
    if (
      window.innerHeight + document.documentElement.scrollTop !==
      document.documentElement.offsetHeight
    ) {
      return;
    }
    setPageNumber(prev => prev + 1);
  }, 200);

  useEffect(() => {
    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  return (
    <>
      <ul>
        {beers.map((beer: any) => (
          <li key={beer.id}>
            <img src={beer.imageSrc} />
            <div>{beer.title}</div>
          </li>
        ))}
      </ul>
    </>
  );
};

export default InfiniteScroll;