สรุป React Hooks พื้นฐาน: วิธีใช้ useState และ useEffect ฉบับเข้าใจง่าย

React Hooks เป็นฟีเจอร์ที่ถูกเพิ่มเข้ามาใน React 16.8 ที่ช่วยให้เราสามารถใช้ state และ lifecycle features ใน functional components ได้

useState Hook

useState เป็น Hook ที่ใช้สำหรับจัดการ state ใน functional component:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffect Hook

useEffect ใช้สำหรับ side effects เช่น data fetching, subscriptions, หรือการเปลี่ยนแปลง DOM:

import React, { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetchUser(userId).then(setUser);
  }, [userId]); // dependency array

  return user ? <div>{user.name}</div> : <div>Loading...</div>;
}

สรุป

React Hooks ช่วยให้โค้ดของเราสะอาด อ่านง่าย และใช้งานซ้ำได้ดีขึ้น เริ่มต้นด้วย useState และ useEffect ก่อน แล้วค่อยเรียนรู้ hooks อื่นๆ ต่อไป