Remix と無限ローディングの相性が悪そう

import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/cloudflare";
import { useFetcher, useLoaderData } from "@remix-run/react";
import uniq from "lodash.uniq";
import { useEffect, useState } from "react";
import { Comment } from "~/components/Comment";
import { CommentForm, CommentFormAction } from "~/components/CommentForm";
import { type Post, getPosts } from "~/repository/posts";

export const meta: MetaFunction = () => {
  return [
    { title: "New Remix App" },
    {
      name: "description",
      content: "Welcome to Remix on Cloudflare!",
    },
  ];
};

export const loader = async ({ context, request }: LoaderFunctionArgs) => {
  const url = new URL(request.url);
  const before = url.searchParams.get("before");
  const beforeId = before === null ? undefined : Number.parseInt(before);

  return getPosts(context.cloudflare.env.DB, beforeId);
};

export const action = CommentFormAction;

export default function Index() {
  const { comments: initComments, maybeHasBefore: initMaybeHasBefore } =
    useLoaderData<typeof loader>();
  const fetcher = useFetcher<typeof loader>();

  const [comments, setComments] = useState(initComments);
  const [maybeHasBefore, setMaybeHasBefore] = useState(initMaybeHasBefore);

  useEffect(() => {
    const fetchedData = fetcher.data;
    if (!fetchedData) return;
    setComments((prev) => getUniqueArray([...fetchedData.comments, ...prev]));
    setMaybeHasBefore(fetchedData.maybeHasBefore);
  }, [fetcher.data]);

  useEffect(() => {
    setComments((prev) => getUniqueArray([...prev, ...initComments]));
  }, [initComments]);

  return (
    <div className="px-4 py-16 mx-auto prose flex flex-col gap-8">
      <div>
        {maybeHasBefore && (
          <fetcher.Form method="get">
            <button type="submit" name="before" value={comments[0].id}>
              以前のデータを取得する
            </button>
          </fetcher.Form>
        )}
        <ul>
          {comments.map((c) => (
            <li id={`comment-${c.id}`} key={c.id}>
              <Comment body={c.body} created={c.created} />
            </li>
          ))}
        </ul>
        <CommentForm />
      </div>
    </div>
  );
}

function getUniqueArray(combinedArray: Post[]) {
  const newIds = uniq(combinedArray.map((c) => c.id));
  const newArray = newIds
    .map((id) => combinedArray.find((c) => c.id === id))
    .filter((v): v is Post => v !== undefined);
  return newArray;
}