Merge pull request #160 from laststance/chore/lifecycle-hooks

Refactor renderer effects into explicit lifecycle hooks

Author: ryota-murakami

eslint.config.mjs

@@ -1,5 +1,6 @@
 import laststanceReactNextPlugin from '@laststance/react-next-eslint-plugin'
 import tsPrefixer from 'eslint-config-ts-prefixer'
+import reactHooks from 'eslint-plugin-react-hooks'
 import reactYouMightNotNeedAnEffect from 'eslint-plugin-react-you-might-not-need-an-effect'
 import { defineConfig } from 'eslint/config'
 
@@ -82,6 +83,15 @@ export default defineConfig([
       'react-you-might-not-need-an-effect/no-derived-state': 'error',
     },
   },
+  {
+    files: ['src/**/*.{ts,tsx}'],
+    plugins: {
+      'react-hooks': reactHooks,
+    },
+    rules: {
+      'react-hooks/rules-of-hooks': 'error',
+    },
+  },
   {
     plugins: {
       '@laststance/react-next': laststanceReactNextPlugin,

package.json

@@ -84,6 +84,7 @@
     "electron-vite": "^5.0.0",
     "eslint": "^10.3.0",
     "eslint-config-ts-prefixer": "^4.2.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-you-might-not-need-an-effect": "^0.10.1",
     "fallow": "2.69.0",
     "husky": "^9.1.7",

pnpm-lock.yaml

@@ -4,7 +4,7 @@ import { match } from 'ts-pattern'
 
 import { Button } from '@/renderer/src/components/ui/button'
 import { Separator } from '@/renderer/src/components/ui/separator'
-import { useComponentEffect } from '@/renderer/src/hooks/useComponentEffect'
+import { useCycleEffect } from '@/renderer/src/hooks/useCycleEffect'
 import { SKILLS_DESKTOP_REPOSITORY_URL } from '@/shared/constants'
 
 import { SectionFrame } from './SectionFrame'
@@ -69,7 +69,7 @@ export const About = React.memo(function About(): React.ReactElement {
   const isUpdaterAvailable = Boolean(updateApi)
   const [checkStatus, setCheckStatus] = useState<CheckStatus>({ kind: 'idle' })
 
-  useComponentEffect(() => {
+  useCycleEffect(() => {
     if (!updateApi) return
     const cleanups = [
       updateApi.onChecking(() => setCheckStatus({ kind: 'checking' })),

src/renderer/settings/sections/About.tsx

@@ -3,7 +3,7 @@ import React, { useCallback } from 'react'
 
 import { Button } from '@/renderer/src/components/ui/button'
 import { Checkbox } from '@/renderer/src/components/ui/checkbox'
-import { useComponentEffect } from '@/renderer/src/hooks/useComponentEffect'
+import { useCycleEffect } from '@/renderer/src/hooks/useCycleEffect'
 import { useUpdateSettings } from '@/renderer/src/hooks/useUpdateSettings'
 import { cn, toggleArrayMember } from '@/renderer/src/lib/utils'
 import { useAppDispatch, useAppSelector } from '@/renderer/src/redux/hooks'
@@ -44,7 +44,7 @@ export const Agents = React.memo(function Agents(): React.ReactElement {
   const hiddenAgentIds = useAppSelector(selectHiddenAgentIds)
   const updateSettings = useUpdateSettings()
 
-  useComponentEffect(() => {
+  useCycleEffect(() => {
     // Deliberately keyed on `agents.length` only (NOT `loading`). The
     // length value transitions 0 → N exactly once per mount lifecycle,
     // so the effect dispatches once and never re-fires within a mount.

src/renderer/settings/sections/Agents.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
 
 import { Button } from '@/renderer/src/components/ui/button'
-import { useComponentEffect } from '@/renderer/src/hooks/useComponentEffect'
+import { useUnmountEffect } from '@/renderer/src/hooks/useUnmountEffect'
+import { useUpdateEffect } from '@/renderer/src/hooks/useUpdateEffect'
 import { useUpdateSettings } from '@/renderer/src/hooks/useUpdateSettings'
 import { useAppSelector } from '@/renderer/src/redux/hooks'
 import {
@@ -108,16 +109,14 @@ export const Appearance = React.memo(function Appearance(): React.ReactElement {
     })
   }, [clearPersistTimer, updateSettings])
 
-  useComponentEffect(() => {
+  useUpdateEffect(() => {
     clearPersistTimer()
     setBlurRadiusDraft(windowBackgroundBlurRadius)
   }, [windowBackgroundBlurRadius, clearPersistTimer])
 
-  useComponentEffect(() => {
-    return () => {
-      clearPersistTimer()
-    }
-  }, [clearPersistTimer])
+  useUnmountEffect(() => {
+    clearPersistTimer()
+  })
 
   const blurRadiusLabel =
     blurRadiusDraft === WINDOW_BACKGROUND_BLUR_MIN_RADIUS

src/renderer/settings/sections/Appearance.tsx

@@ -7,7 +7,7 @@ import {
   ToggleGroup,
   ToggleGroupItem,
 } from '@/renderer/src/components/ui/toggle-group'
-import { useComponentEffect } from '@/renderer/src/hooks/useComponentEffect'
+import { useInitialEffect } from '@/renderer/src/hooks/useInitialEffect'
 import { useUpdateSettings } from '@/renderer/src/hooks/useUpdateSettings'
 import { useAppSelector } from '@/renderer/src/redux/hooks'
 import { TERMINAL_APP_IDS, TERMINAL_APP_UI_LABELS } from '@/shared/constants'
@@ -129,7 +129,7 @@ export const General = React.memo(function General(): React.ReactElement {
   const [isMainWindowAvailable, setIsMainWindowAvailable] =
     useState<boolean>(true)
 
-  useComponentEffect(() => {
+  useInitialEffect(() => {
     let cancelled = false
     // Attach `.catch` explicitly — `void promise.then(...)` only suppresses
     // TypeScript's "promise not handled" hint, it does NOT silence a real
@@ -149,7 +149,7 @@ export const General = React.memo(function General(): React.ReactElement {
     return () => {
       cancelled = true
     }
-  }, [])
+  })
 
   /**
    * Capture the live main-window bounds via IPC and persist them.

src/renderer/settings/sections/General.tsx

@@ -4,7 +4,7 @@ import ReactGridLayout, {
   type Layout,
 } from 'react-grid-layout'
 
-import { useComponentEffect } from '@/renderer/src/hooks/useComponentEffect'
+import { useCycleEffect } from '@/renderer/src/hooks/useCycleEffect'
 import { useAppDispatch, useAppSelector } from '@/renderer/src/redux/hooks'
 import {
   seedDefaultsIfEmpty,
@@ -50,7 +50,7 @@ export const DashboardCanvas = React.memo(
 
     // Seed the default 4 pages on first render. The reducer guards against
     // re-seeding (`initialized` flag), so calling this repeatedly is free.
-    useComponentEffect(() => {
+    useCycleEffect(() => {
       if (!isInitialized) dispatch(seedDefaultsIfEmpty())
     }, [dispatch, isInitialized])
 

src/renderer/src/components/dashboard/DashboardCanvas.tsx

@@ -9,7 +9,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/renderer/src/components/ui/dropdown-menu'
-import { useComponentEffect } from '@/renderer/src/hooks/useComponentEffect'
+import { useCycleEffect } from '@/renderer/src/hooks/useCycleEffect'
 import { cn } from '@/renderer/src/lib/utils'
 import { useAppDispatch, useAppSelector } from '@/renderer/src/redux/hooks'
 import {
@@ -185,7 +185,7 @@ const PageTab = React.memo(function PageTab({
 
   // Reset the draft to the latest canonical name each time rename mode opens.
   // Using rAF defers focus until after the input is mounted in the DOM.
-  useComponentEffect(() => {
+  useCycleEffect(() => {
     if (isRenaming) {
       setDraftName(page.name)
       requestAnimationFrame(() => renameInputRef.current?.select())

src/renderer/src/components/dashboard/DashboardPageTabs.tsx

@@ -1,7 +1,7 @@
 import { AlertCircle, type LucideIcon } from 'lucide-react'
 import React from 'react'
 
-import { useComponentEffect } from '@/renderer/src/hooks/useComponentEffect'
+import { useCycleEffect } from '@/renderer/src/hooks/useCycleEffect'
 import { useAppDispatch, useAppSelector } from '@/renderer/src/redux/hooks'
 import { loadLeaderboard } from '@/renderer/src/redux/slices/marketplaceSlice'
 import type { RankingFilter } from '@/shared/types'
@@ -48,7 +48,7 @@ export const LeaderboardWidget = React.memo(function LeaderboardWidget({
     (state) => state.marketplace.leaderboard[filter],
   )
 
-  useComponentEffect(() => {
+  useCycleEffect(() => {
     dispatch(loadLeaderboard(filter))
   }, [dispatch, filter])