refactor: optimize LongText and NewChat components by removing unnecessary useEffect hooks

Author: satnaing

src/components/long-text.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 import { cn } from '@/lib/utils'
 import {
   Popover,
@@ -26,18 +26,17 @@ export function LongText({
   const ref = useRef<HTMLDivElement>(null)
   const [isOverflown, setIsOverflown] = useState(false)
 
-  useEffect(() => {
-    if (checkOverflow(ref.current)) {
-      setIsOverflown(true)
-      return
+  // Use ref callback to check overflow when element is mounted
+  const refCallback = (node: HTMLDivElement | null) => {
+    ref.current = node
+    if (node && checkOverflow(node)) {
+      queueMicrotask(() => setIsOverflown(true))
     }
-
-    setIsOverflown(false)
-  }, [])
+  }
 
   if (!isOverflown)
     return (
-      <div ref={ref} className={cn('truncate', className)}>
+      <div ref={refCallback} className={cn('truncate', className)}>
         {children}
       </div>
     )
@@ -48,7 +47,7 @@ export function LongText({
         <TooltipProvider delayDuration={0}>
           <Tooltip>
             <TooltipTrigger asChild>
-              <div ref={ref} className={cn('truncate', className)}>
+              <div ref={refCallback} className={cn('truncate', className)}>
                 {children}
               </div>
             </TooltipTrigger>
@@ -61,7 +60,7 @@ export function LongText({
       <div className='sm:hidden'>
         <Popover>
           <PopoverTrigger asChild>
-            <div ref={ref} className={cn('truncate', className)}>
+            <div ref={refCallback} className={cn('truncate', className)}>
               {children}
             </div>
           </PopoverTrigger>

src/features/chats/components/new-chat.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import { Check, X } from 'lucide-react'
 import { showSubmittedData } from '@/lib/show-submitted-data'
 import { Badge } from '@/components/ui/badge'
@@ -41,14 +41,16 @@ export function NewChat({ users, onOpenChange, open }: NewChatProps) {
     setSelectedUsers(selectedUsers.filter((user) => user.id !== userId))
   }
 
-  useEffect(() => {
-    if (!open) {
+  const handleOpenChange = (newOpen: boolean) => {
+    onOpenChange(newOpen)
+    // Reset selected users when dialog closes
+    if (!newOpen) {
       setSelectedUsers([])
     }
-  }, [open])
+  }
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
+    <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogContent className='sm:max-w-[600px]'>
         <DialogHeader>
           <DialogTitle>New message</DialogTitle>