React မှာ functional style ကို သုံးတဲ့အခါ ဖြစ်တတ်တဲ့ မကောင်းတဲ့အချက်တွေနဲ့ ဥပမာတွေကို ရှင်းပြပေးပါမယ်။

1. Prop Drilling: Function components တွေကို အများကြီးသုံးလာတဲ့အခါ prop drilling ပြဿနာဖြစ်လာနိုင်ပါတယ်။

   ဥပမာ:

   function GrandParent({ user }) {
     return <Parent user={user} />;
   }
   
   function Parent({ user }) {
     return <Child user={user} />;
   }
   
   function Child({ user }) {
     return <h1>Hello, {user.name}!</h1>;
   }
   

   ဒီမှာ user prop က GrandParent ကနေ Child အထိ pass လုပ်နေရပါတယ်။

2. ပိုပြီး Complex ဖြစ်လာတဲ့ Components: Logic တွေများလာတဲ့အခါ function component တွေဟာ အရမ်းကြီးလာနိုင်ပါတယ်။

   ဥပမာ:

   function ComplexComponent() {
     const [state1, setState1] = useState(null);
     const [state2, setState2] = useState(null);
     const [state3, setState3] = useState(null);
   
     useEffect(() => {
       // Effect 1
     }, [state1]);
   
     useEffect(() => {
       // Effect 2
     }, [state2]);
   
     useEffect(() => {
       // Effect 3
     }, [state3]);
   
     const handleChange1 = () => { /* ... */ };
     const handleChange2 = () => { /* ... */ };
     const handleChange3 = () => { /* ... */ };
   
     return (
       // Complex JSX
     );
   }
   

3. Performance Issues: Function components တွေက re-render လုပ်တိုင်း function ကို ပြန်ခေါ်ပါတယ်။ ဒါကြောင့် performance ပြဿနာဖြစ်နိုင်ပါတယ်။

   ဥပမာ:

   function ExpensiveComponent({ data }) {
     const expensiveCalculation = (data) => {
       // Heavy calculation
     };
   
     const result = expensiveCalculation(data);
   
     return <div>{result}</div>;
   }
   

   ဒီ component က re-render လုပ်တိုင်း expensive calculation ကို ပြန်လုပ်နေမှာပါ။

ဒီပြဿနာတွေကို ဖြေရှင်းဖို့ Context API, custom hooks, useMemo, useCallback စတာတွေကို သုံးနိုင်ပါတယ်။ ဒါပေမယ့် ဒီ solutions တွေကို မှန်မှန်ကန်ကန်သုံးဖို့လိုပါတယ်။