React မှာ clean code ရေးဖို့အတွက် အောက်ပါအချက်တွေကို လိုက်နာနိုင်ပါတယ်။ နမူနာအနေနဲ့ ပြပေးပါမယ်။

1. Component တွေကို သီးခြားခွဲထုတ်ပြီး ရေးပါ။

// BadComponent.js
const BadComponent = () => {
  return (
    <div>
      <h1>Header</h1>
      <p>Some content</p>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>
    </div>
  );
};

// GoodComponent.js
const Header = () => <h1>Header</h1>;
const Content = () => <p>Some content</p>;
const List = () => (
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
);

const GoodComponent = () => (
  <div>
    <Header />
    <Content />
    <List />
  </div>
);

2. Props တွေကို destructure လုပ်ပါ။

// Bad
const UserInfo = (props) => (
  <div>
    <p>{props.name}</p>
    <p>{props.email}</p>
  </div>
);

// Good
const UserInfo = ({ name, email }) => (
  <div>
    <p>{name}</p>
    <p>{email}</p>
  </div>
);

3. ရှည်လျားတဲ့ conditional rendering တွေကို ရှင်းလင်းအောင် ရေးပါ။

// Bad
const Component = ({ isLoading, isError, data }) => {
  return (
    <div>
      {isLoading ? (
        <LoadingSpinner />
      ) : isError ? (
        <ErrorMessage />
      ) : data ? (
        <DataDisplay data={data} />
      ) : (
        <NoDataMessage />
      )}
    </div>
  );
};

// Good
const Component = ({ isLoading, isError, data }) => {
  if (isLoading) return <LoadingSpinner />;
  if (isError) return <ErrorMessage />;
  if (!data) return <NoDataMessage />;

  return <DataDisplay data={data} />;
};

4. Custom Hooks သုံးပြီး logic တွေကို ခွဲထုတ်ပါ။

// useFetch.js
const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then(setData)
      .catch(setError)
      .finally(() => setIsLoading(false));
  }, [url]);

  return { data, isLoading, error };
};

// Component.js
const Component = () => {
  const { data, isLoading, error } = useFetch('https://api.example.com/data');

  if (isLoading) return <LoadingSpinner />;
  if (error) return <ErrorMessage error={error} />;

  return <DataDisplay data={data} />;
};

ဒီနည်းတွေကို လိုက်နာခြင်းအားဖြင့် React code တွေဟာ ပိုပြီး clean ဖြစ်သွားပြီး၊ ဖတ်ရလွယ်ကူပြီး၊ maintain လုပ်ရတာ ပိုလွယ်ကူသွားမှာ ဖြစ်ပါတယ်။