[Chore/Refactor] Implement lazy initialization for useState calls to prevent re-computation (#26252)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: asukaminato0721 <30024051+asukaminato0721@users.noreply.github.com>

web/app/components/base/date-and-time-picker/date-picker/index.tsx

@@ -55,8 +55,8 @@ const DatePicker = ({
   const [currentDate, setCurrentDate] = useState(inputValue || defaultValue)
   const [selectedDate, setSelectedDate] = useState(inputValue)
 
-  const [selectedMonth, setSelectedMonth] = useState((inputValue || defaultValue).month())
-  const [selectedYear, setSelectedYear] = useState((inputValue || defaultValue).year())
+  const [selectedMonth, setSelectedMonth] = useState(() => (inputValue || defaultValue).month())
+  const [selectedYear, setSelectedYear] = useState(() => (inputValue || defaultValue).year())
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {

web/app/components/base/date-and-time-picker/time-picker/index.tsx

@@ -28,7 +28,7 @@ const TimePicker = ({
   const [isOpen, setIsOpen] = useState(false)
   const containerRef = useRef<HTMLDivElement>(null)
   const isInitial = useRef(true)
-  const [selectedTime, setSelectedTime] = useState(value ? getDateWithTimezone({ timezone, date: value }) : undefined)
+  const [selectedTime, setSelectedTime] = useState(() => value ? getDateWithTimezone({ timezone, date: value }) : undefined)
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {

web/app/components/base/markdown-blocks/think-block.tsx

@@ -37,7 +37,7 @@ const removeEndThink = (children: any): any => {
 
 const useThinkTimer = (children: any) => {
   const { isResponding } = useChatContext()
-  const [startTime] = useState(Date.now())
+  const [startTime] = useState(() => Date.now())
   const [elapsedTime, setElapsedTime] = useState(0)
   const [isComplete, setIsComplete] = useState(false)
   const timerRef = useRef<NodeJS.Timeout>()

web/app/components/base/notion-page-selector/base.tsx

@@ -93,7 +93,7 @@ const NotionPageSelector = ({
   const defaultSelectedPagesId = useMemo(() => {
     return [...Array.from(pagesMapAndSelectedPagesId[1]), ...(value || [])]
   }, [pagesMapAndSelectedPagesId, value])
-  const [selectedPagesId, setSelectedPagesId] = useState<Set<string>>(new Set(defaultSelectedPagesId))
+  const [selectedPagesId, setSelectedPagesId] = useState<Set<string>>(() => new Set(defaultSelectedPagesId))
 
   useEffect(() => {
     setSelectedPagesId(new Set(defaultSelectedPagesId))

web/app/components/base/tab-slider/index.tsx

@@ -21,7 +21,7 @@ const TabSlider: FC<TabSliderProps> = ({
   onChange,
   options,
 }) => {
-  const [activeIndex, setActiveIndex] = useState(options.findIndex(option => option.value === value))
+  const [activeIndex, setActiveIndex] = useState(() => options.findIndex(option => option.value === value))
   const [sliderStyle, setSliderStyle] = useState({})
   const { data: pluginList } = useInstalledPluginList()