feat: fix use effect usage

Author: Makisuo

apps/web/src/components/dashboard-builder/config/query-panel.tsx

@@ -126,9 +126,11 @@ function GroupByMultiSelect({
 
   const isOpen = isFocused && !isDismissed && suggestions.length > 0
 
-  React.useEffect(() => {
+  const handleInputChange = React.useCallback((nextValue: string) => {
+    setInputValue(nextValue)
     setActiveIndex(0)
-  }, [suggestions.length, inputValue])
+    setIsDismissed(false)
+  }, [])
 
   const addKey = React.useCallback(
     (key: string) => {
@@ -194,10 +196,7 @@ function GroupByMultiSelect({
             setIsDismissed(false)
           }}
           onBlur={() => setIsFocused(false)}
-          onChange={(event) => {
-            setInputValue(event.target.value)
-            setIsDismissed(false)
-          }}
+          onChange={(event) => handleInputChange(event.target.value)}
           onKeyDown={(event) => {
             if (event.key === "Backspace" && !inputValue && value.length > 0) {
               removeKey(value[value.length - 1])

apps/web/src/components/dashboard-builder/config/widget-query-builder-page.tsx

@@ -555,31 +555,35 @@ export function WidgetQueryBuilderPage({
     }
   }, [logsFacetsResult, metricRows, tracesFacetsResult, attributeKeys, attributeValues, resourceAttributeKeys, resourceAttributeValues])
 
-  React.useEffect(() => {
-    if (metricSelectionOptions.length === 0) return
-    setState((current) => {
-      const [defaultMetricName, defaultMetricTypeRaw] = metricSelectionOptions[0].value.split("::")
-      const defaultMetricType = defaultMetricTypeRaw as QueryBuilderMetricType
-      let changed = false
-      const queries = current.queries.map((query) => {
-        if (query.dataSource !== "metrics" || query.metricName || !defaultMetricName || !defaultMetricType) return query
-        changed = true
-        return { ...query, metricName: defaultMetricName, metricType: defaultMetricType }
+  const appliedMetricDefaultRef = React.useRef(false)
+  if (metricSelectionOptions.length > 0 && !appliedMetricDefaultRef.current) {
+    const [defaultMetricName, defaultMetricTypeRaw] = metricSelectionOptions[0].value.split("::")
+    const defaultMetricType = defaultMetricTypeRaw as QueryBuilderMetricType
+    const needsDefault = state.queries.some(
+      (query) => query.dataSource === "metrics" && !query.metricName && defaultMetricName && defaultMetricType,
+    )
+    if (needsDefault) {
+      appliedMetricDefaultRef.current = true
+      setState((current) => {
+        let changed = false
+        const queries = current.queries.map((query) => {
+          if (query.dataSource !== "metrics" || query.metricName || !defaultMetricName || !defaultMetricType) return query
+          changed = true
+          return { ...query, metricName: defaultMetricName, metricType: defaultMetricType }
+        })
+        return changed ? { ...current, queries } : current
       })
-      return changed ? { ...current, queries } : current
-    })
-  }, [metricSelectionOptions])
+    }
+  }
 
   const seriesFieldOptions = React.useMemo(() => toSeriesFieldOptions(state), [state])
 
-  React.useEffect(() => {
-    if (state.visualization !== "stat" || seriesFieldOptions.length === 0) return
-    if (state.statValueField && seriesFieldOptions.includes(state.statValueField)) return
-    setState((current) => {
-      if (current.statValueField && seriesFieldOptions.includes(current.statValueField)) return current
-      return { ...current, statValueField: seriesFieldOptions[0] }
-    })
-  }, [widget, state, seriesFieldOptions])
+  const effectiveStatValueField =
+    state.visualization === "stat" &&
+    seriesFieldOptions.length > 0 &&
+    (!state.statValueField || !seriesFieldOptions.includes(state.statValueField))
+      ? seriesFieldOptions[0]
+      : state.statValueField
 
   const previewWidget = React.useMemo(() => {
     const previewState = stagedState ?? state
@@ -754,7 +758,7 @@ export function WidgetQueryBuilderPage({
             includePercentChange={state.includePercentChange}
             debug={state.debug}
             statAggregate={state.statAggregate}
-            statValueField={state.statValueField}
+            statValueField={effectiveStatValueField}
             unit={state.unit}
             tableLimit={state.tableLimit}
             seriesFieldOptions={seriesFieldOptions}

apps/web/src/components/dashboard-builder/inline-editable-title.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect } from "react"
+import { useState, useRef, useCallback } from "react"
 
 export function InlineEditableTitle({
   value,
@@ -13,22 +13,17 @@ export function InlineEditableTitle({
   const [draft, setDraft] = useState(value)
   const inputRef = useRef<HTMLInputElement>(null)
 
-  useEffect(() => {
+  const startEditing = useCallback(() => {
+    if (readOnly) return
     setDraft(value)
-  }, [value])
-
-  useEffect(() => {
-    if (isEditing) {
-      inputRef.current?.select()
-    }
-  }, [isEditing])
+    setIsEditing(true)
+    requestAnimationFrame(() => inputRef.current?.select())
+  }, [readOnly, value])
 
   const handleSubmit = () => {
     const trimmed = draft.trim()
     if (trimmed && trimmed !== value) {
       onChange(trimmed)
-    } else {
-      setDraft(value)
     }
     setIsEditing(false)
   }
@@ -62,15 +57,11 @@ export function InlineEditableTitle({
     <h1
       role="button"
       tabIndex={0}
-      onClick={() => {
-        if (readOnly) return
-        setIsEditing(true)
-      }}
+      onClick={startEditing}
       onKeyDown={(e) => {
-        if (readOnly) return
         if (e.key === "Enter" || e.key === " ") {
           e.preventDefault()
-          setIsEditing(true)
+          startEditing()
         }
       }}
       aria-disabled={readOnly}

apps/web/src/components/logs/logs-filter-sidebar.tsx

@@ -1,5 +1,5 @@
 import { Result, useAtomValue } from "@/lib/effect-atom"
-import { useEffect, useState } from "react"
+import { useCallback, useRef, useState } from "react"
 import { useNavigate } from "@tanstack/react-router"
 import { XmarkIcon, MagnifierIcon } from "@/components/icons"
 
@@ -31,22 +31,21 @@ export function LogsFilterSidebar() {
     useEffectiveTimeRange(search.startTime, search.endTime, search.timePreset ?? "12h")
 
   const [searchText, setSearchText] = useState(search.search ?? "")
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
-  useEffect(() => {
-    setSearchText(search.search ?? "")
-  }, [search.search])
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      const value = searchText.trim() || undefined
-      if (value !== search.search) {
+  const handleSearchChange = useCallback(
+    (value: string) => {
+      setSearchText(value)
+      if (debounceRef.current) clearTimeout(debounceRef.current)
+      debounceRef.current = setTimeout(() => {
+        const trimmed = value.trim() || undefined
         navigate({
-          search: (prev) => ({ ...prev, search: value }),
+          search: (prev) => ({ ...prev, search: trimmed }),
         })
-      }
-    }, 300)
-    return () => clearTimeout(timer)
-  }, [searchText, search.search, navigate])
+      }, 300)
+    },
+    [navigate],
+  )
 
   const facetsResult = useAtomValue(
     getLogsFacetsResultAtom({
@@ -111,14 +110,14 @@ export function LogsFilterSidebar() {
                 <input
                   type="text"
                   value={searchText}
-                  onChange={(e) => setSearchText(e.target.value)}
+                  onChange={(e) => handleSearchChange(e.target.value)}
                   placeholder="Search log messages..."
                   className="h-7 w-full rounded-md border border-input bg-background pl-7 pr-7 text-xs placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                 />
                 {searchText && (
                   <button
                     type="button"
-                    onClick={() => setSearchText("")}
+                    onClick={() => handleSearchChange("")}
                     className="absolute right-1.5 top-1/2 -translate-y-1/2 rounded-sm p-0.5 text-muted-foreground hover:text-foreground"
                   >
                     <XmarkIcon strokeWidth={2} className="size-3" />

apps/web/src/components/time-range-picker/custom-range-picker.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react"
+import { useState } from "react"
 import { Calendar } from "@maple/ui/components/ui/calendar"
 import { Button } from "@maple/ui/components/ui/button"
 import { Input } from "@maple/ui/components/ui/input"
@@ -33,22 +33,6 @@ export function CustomRangePicker({
     return endTime ? format(new Date(endTime), "HH:mm") : "23:59"
   })
 
-  useEffect(() => {
-    const from = startTime ? new Date(startTime) : undefined
-    const to = endTime ? new Date(endTime) : undefined
-
-    if (from) {
-      setStartTimeInput(format(from, "HH:mm"))
-    }
-    if (to) {
-      setEndTimeInput(format(to, "HH:mm"))
-    }
-
-    if (from || to) {
-      setDateRange({ from, to })
-    }
-  }, [startTime, endTime])
-
   const handleApply = () => {
     if (!dateRange?.from || !dateRange?.to) return