React Refactoring Techniques (เทคนิคปรับปรุงโค้ด React)

การปรับปรุงโครงสร้างโค้ดช่วยให้แอปพลิเคชันดูแลง่ายและมีประสิทธิภาพมากขึ้น

Extract Component (แยกคอมโพเนนต์)

// ก่อน refactor
function UserProfile() {
  return (
    <div>
      <div className="avatar">
        <img src={user.avatar} />
      </div>
      <div className="user-info">
        <h2>{user.name}</h2>
        <p>{user.bio}</p>
      </div>
    </div>
  );
}

// หลัง refactor
function Avatar({ src }) {
  return (
    <div className="avatar">
      <img src={src} />
    </div>
  );
}

function UserInfo({ name, bio }) {
  return (
    <div className="user-info">
      <h2>{name}</h2>
      <p>{bio}</p>
    </div>
  );
}

function UserProfile() {
  return (
    <div>
      <Avatar src={user.avatar} />
      <UserInfo name={user.name} bio={user.bio} />
    </div>
  );
}

Custom Hooks (สร้าง Hook เฉพาะงาน)

// ก่อน refactor
function ComponentA() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      const result = await fetch("/api/data");
      setData(await result.json());
      setLoading(false);
    };
    fetchData();
  }, []);

  // ...
}

// หลัง refactor
function useFetchData(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      const result = await fetch(url);
      setData(await result.json());
      setLoading(false);
    };
    fetchData();
  }, [url]);

  return { data, loading };
}

function ComponentA() {
  const { data, loading } = useFetchData("/api/data");
  // ...
}

หมายเหตุ

• Refactor เล็กน้อยบ่อยๆ ดีกว่าทำครั้งใหญ่
• มี test คอยตรวจสอบหลัง refactor
• ใช้เครื่องมือเช่น ESLint ช่วยตรวจสอบ