react-hooksのlintエラーを半分修正

Author: na-trium-144

app/(docs)/@docs/[lang]/[pageId]/pageContent.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Fragment, useCallback, useEffect, useRef, useState } from "react";
+import { Fragment, useEffect, useMemo, useRef, useState } from "react";
 import { ChatForm } from "./chatForm";
 import { StyledMarkdown } from "@/markdown/markdown";
 import { useSidebarMdContext } from "@/sidebar";
@@ -32,11 +32,41 @@ export function PageContent(props: PageContentProps) {
   const { setSidebarMdContent } = useSidebarMdContext();
   const { splitMdContent, pageEntry, path, chatHistories } = props;
 
-  const initDynamicMdContent = useCallback(() => {
+  const [sectionInView, setSectionInView] = useState<boolean[]>([]);
+  const sectionRefs = useRef<Array<HTMLDivElement | null>>([]);
+  useEffect(() => {
+    const handleScroll = () => {
+      setSectionInView((sectionInView) => {
+        sectionInView = sectionInView.slice(); // Reactの変更検知のために新しい配列を作成
+        for (
+          let i = 0;
+          i < sectionRefs.current.length || i < sectionInView.length;
+          i++
+        ) {
+          if (sectionRefs.current.at(i)) {
+            const rect = sectionRefs.current.at(i)!.getBoundingClientRect();
+            sectionInView[i] =
+              rect.top < window.innerHeight * 0.9 &&
+              rect.bottom >= window.innerHeight * 0.1;
+          } else {
+            sectionInView[i] = false;
+          }
+        }
+        return sectionInView;
+      });
+    };
+    window.addEventListener("scroll", handleScroll);
+    handleScroll();
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  const dynamicMdContent = useMemo(() => {
     const newContent: DynamicMarkdownSection[] = splitMdContent.map(
-      (section) => ({
+      (section, i) => ({
         ...section,
-        inView: false,
+        inView: sectionInView[i],
         replacedContent: section.rawContent,
         replacedRange: [],
       })
@@ -94,54 +124,13 @@ export function PageContent(props: PageContentProps) {
     }
 
     return newContent;
-  }, [splitMdContent, chatHistories]);
-
-  // SSR用のローカルstate
-  const [dynamicMdContent, setDynamicMdContent] = useState<
-    DynamicMarkdownSection[]
-  >(() => initDynamicMdContent());
+  }, [splitMdContent, chatHistories, sectionInView]);
 
   useEffect(() => {
     // props.splitMdContentが変わったとき, チャットのdiffが変わった時に
-    // ローカルstateとcontextの両方を更新
-    const newContent = initDynamicMdContent();
-    setDynamicMdContent(newContent);
-    setSidebarMdContent(path, newContent);
-  }, [initDynamicMdContent, path, setSidebarMdContent]);
-
-  const sectionRefs = useRef<Array<HTMLDivElement | null>>([]);
-  // sectionRefsの長さをsplitMdContentに合わせる
-  while (sectionRefs.current.length < props.splitMdContent.length) {
-    sectionRefs.current.push(null);
-  }
-
-  useEffect(() => {
-    const handleScroll = () => {
-      const updateContent = (
-        prevDynamicMdContent: DynamicMarkdownSection[]
-      ) => {
-        const dynMdContent = prevDynamicMdContent.slice(); // Reactの変更検知のために新しい配列を作成
-        for (let i = 0; i < sectionRefs.current.length; i++) {
-          if (sectionRefs.current.at(i) && dynMdContent.at(i)) {
-            const rect = sectionRefs.current.at(i)!.getBoundingClientRect();
-            dynMdContent.at(i)!.inView =
-              rect.top < window.innerHeight * 0.9 &&
-              rect.bottom >= window.innerHeight * 0.1;
-          }
-        }
-        return dynMdContent;
-      };
-
-      // ローカルstateとcontextの両方を更新
-      setDynamicMdContent(updateContent);
-      setSidebarMdContent(path, updateContent);
-    };
-    window.addEventListener("scroll", handleScroll);
-    handleScroll();
-    return () => {
-      window.removeEventListener("scroll", handleScroll);
-    };
-  }, [setSidebarMdContent, path]);
+    // sidebarのcontextを更新
+    setSidebarMdContent(path, dynamicMdContent);
+  }, [dynamicMdContent, path, setSidebarMdContent]);
 
   const [isFormVisible, setIsFormVisible] = useState(false);
 

app/lib/clientOnly.ts

@@ -0,0 +1,12 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+
+// --- SSR無効化のためのカスタムフック準備 ---
+const subscribe = () => () => {};
+const getSnapshot = () => true; // クライアントでは true
+const getServerSnapshot = () => false; // サーバーでは false
+
+export function useIsClient() {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}

app/markdown/styledSyntaxHighlighter.tsx

@@ -5,9 +5,10 @@ import {
   tomorrow,
   tomorrowNight,
 } from "react-syntax-highlighter/dist/esm/styles/hljs";
-import { lazy, Suspense, useEffect, useState } from "react";
+import { lazy, Suspense } from "react";
 import { LangConstants } from "@my-code/runtime/languages";
 import clsx from "clsx";
+import { useIsClient } from "@/lib/clientOnly";
 
 // SyntaxHighlighterはファイルサイズがでかいので & HydrationErrorを起こすので、SSRを無効化する
 const SyntaxHighlighter = lazy(() => {
@@ -24,11 +25,8 @@ export function StyledSyntaxHighlighter(props: {
 }) {
   const theme = useChangeTheme();
   const codetheme = theme === "tomorrow" ? tomorrow : tomorrowNight;
-  const [initHighlighter, setInitHighlighter] = useState(false);
-  useEffect(() => {
-    setInitHighlighter(true);
-  }, []);
-  return initHighlighter ? (
+  const isClient = useIsClient();
+  return isClient ? (
     <Suspense fallback={<FallbackPre>{props.children}</FallbackPre>}>
       <SyntaxHighlighter
         language={props.language.rsh}

app/sidebar.tsx

@@ -15,7 +15,6 @@ import {
   ReactNode,
   useCallback,
   useContext,
-  useEffect,
   useState,
 } from "react";
 import clsx from "clsx";
@@ -100,22 +99,17 @@ export function Sidebar({ pagesList }: { pagesList: LanguageEntry[] }) {
 
   // 目次の開閉状態
   const [detailsOpen, setDetailsOpen] = useState<boolean[]>([]);
-  const currentLangIndex = pagesList.findIndex(
-    (group) => currentLang === group.id
-  );
-  useEffect(() => {
-    // 表示しているグループが変わったときに現在のグループのdetailsを開く
-    if (currentLangIndex !== -1) {
-      setDetailsOpen((detailsOpen) => {
-        const newDetailsOpen = [...detailsOpen];
-        while (newDetailsOpen.length <= currentLangIndex) {
-          newDetailsOpen.push(false);
-        }
-        newDetailsOpen[currentLangIndex] = true;
-        return newDetailsOpen;
-      });
-    }
-  }, [currentLangIndex]);
+  const [prevLangIndex, setPrevLangIndex] = useState<number>(-1);
+  const langIndex = pagesList.findIndex((group) => currentLang === group.id);
+  // 表示しているグループが変わったときに現在のグループのdetailsを開く
+  if (prevLangIndex !== langIndex) {
+    setPrevLangIndex(langIndex);
+    setDetailsOpen((detailsOpen) => {
+      const newDetailsOpen = [...detailsOpen];
+      newDetailsOpen[langIndex] = true;
+      return newDetailsOpen;
+    });
+  }
 
   return (
     <div className="bg-base-200 h-full w-sidebar flex flex-col relative">

app/terminal/embedContext.tsx

@@ -7,7 +7,6 @@ import {
   ReactNode,
   useCallback,
   useContext,
-  useEffect,
   useState,
 } from "react";
 
@@ -58,7 +57,7 @@ export function useEmbedContext() {
 export function EmbedContextProvider({ children }: { children: ReactNode }) {
   const pathname = usePathname();
 
-  const [currentPathname, setCurrentPathname] = useState<PagePathname>("");
+  const [prevPathname, setPrevPathname] = useState<PagePathname>("");
   const [files, setFiles] = useState<
     Record<PagePathname, Record<Filename, string>>
   >({});
@@ -72,15 +71,12 @@ export function EmbedContextProvider({ children }: { children: ReactNode }) {
   const [execResults, setExecResults] = useState<
     Record<Filename, ReplOutput[]>
   >({});
-  // pathnameが変わったらデータを初期化
-  useEffect(() => {
-    if (pathname && pathname !== currentPathname) {
-      setCurrentPathname(pathname);
-      setReplOutputs({});
-      setCommandIdCounters({});
-      setExecResults({});
-    }
-  }, [pathname, currentPathname]);
+  if (pathname && pathname !== prevPathname) {
+    setPrevPathname(pathname);
+    setReplOutputs({});
+    setCommandIdCounters({});
+    setExecResults({});
+  }
 
   const writeFile = useCallback(
     (updatedFiles: Record<Filename, string>) => {

app/terminal/exec.tsx

@@ -77,8 +77,8 @@ export function ExecFile(props: ExecProps) {
   >("idle");
   useEffect(() => {
     if (executionState === "triggered" && ready) {
-      setExecutionState("executing");
       (async () => {
+        setExecutionState("executing");
         clearTerminal(terminalInstanceRef.current!);
         terminalInstanceRef.current!.write(systemMessageColor("実行中です..."));
         // TODO: 1つのファイル名しか受け付けないところに無理やりコンマ区切りで全部のファイル名を突っ込んでいる

eslint.config.mjs

@@ -6,11 +6,11 @@ const eslintConfig = [
   {
     ignores: [
       ".next/**",
+      ".open-next/**",
+      ".wrangler/**",
       "node_modules/**",
       "public/**",
       "cloudflare-env.d.ts",
-      "packages/runtime/node_modules/**",
-      "packages/runtime/dist/**",
     ],
   },
   ...nextCoreWebVitals,
@@ -27,10 +27,6 @@ const eslintConfig = [
           ignoreRestSiblings: true,
         },
       ],
-      // react-hooks/refs と react-hooks/set-state-in-effect は Next.js 16 で追加された新しいルールで、
-      // 既存のコードパターンと相性が悪いため無効化する
-      "react-hooks/refs": "off",
-      "react-hooks/set-state-in-effect": "off",
     },
   },
 ];