อ่านเกี่ยวกับ React Basic

React Hooks: ฟังก์ชันพิเศษใน React#

React Hooks คืออะไร?#

React Hooks เป็นฟังก์ชันพิเศษใน React ที่ถูกเพิ่มเข้ามาตั้งแต่เวอร์ชัน 16.8 ซึ่งช่วยให้เราสามารถใช้ฟีเจอร์ต่าง ๆ ของ React เช่น การจัดการสถานะ (state) และการทำงานอื่น ๆ ที่เคยมีเฉพาะใน Class Components มาใช้ใน Function Components ได้ โดยไม่จำเป็นต้องสร้างเป็นคลาสคอมโพเนนต์

ประโยชน์ของการใช้ Hooks:#

• ทำให้โค้ดสะอาดและเข้าใจง่ายขึ้น
• ลดความซับซ้อนในการใช้งาน state และ side effects
• ช่วยให้คอมโพเนนต์มีการจัดการสถานะและการทำงานต่าง ๆ ได้อย่างง่ายดาย

การใช้งาน State Hook (useState)#

useState เป็น Hook ที่ใช้ในการจัดการสถานะ (state) ภายในฟังก์ชันคอมโพเนนต์ มันจะคืนค่ามาเป็น array ที่ประกอบด้วยตัวแปรสถานะและฟังก์ชันสำหรับอัปเดตสถานะนั้น

import React, { useState } from 'react';

function Counter() {
  // ประกาศตัวแปร count และฟังก์ชัน setCount
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>คุณคลิก {count} ครั้ง</p>
      <button onClick={() => setCount(count + 1)}>คลิกเพิ่ม</button>
    </div>
  );
}

export default Counter;

อธิบาย:

• useState(0) กำหนดค่าเริ่มต้นเป็น 0
• count เป็นค่าของสถานะปัจจุบัน
• setCount เป็นฟังก์ชันที่ใช้ในการอัปเดตค่า count

การจัดการ Side Effects ด้วย Effect Hook (useEffect)#

useEffect เป็น Hook ที่ใช้จัดการ side effects ภายในฟังก์ชันคอมโพเนนต์ เช่น การเรียกใช้ API การอัปเดต DOM หรือการ subscribe กับข้อมูลภายนอก

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

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

  // ใช้ useEffect เพื่อจัดการ side effect
  useEffect(() => {
    document.title = `คุณคลิก ${count} ครั้ง`;
  }, [count]); // ทำงานเมื่อ count เปลี่ยนแปลง

  return (
    <div>
      <p>คุณคลิก {count} ครั้ง</p>
      <button onClick={() => setCount(count + 1)}>คลิกเพิ่ม</button>
    </div>
  );
}

export default Example;

อธิบาย:

• useEffect จะทำงานทุกครั้งเมื่อค่าของ count เปลี่ยน
• สามารถส่ง array ในพารามิเตอร์ที่สอง [count] เพื่อกำหนดว่า effect จะทำงานเมื่อค่าใน array เปลี่ยนแปลงเท่านั้น

การใช้งาน Context Hook (useContext)#

useContext เป็น Hook ที่ใช้เพื่อดึงค่าจาก Context ทำให้เราสามารถส่งข้อมูลผ่านหลายๆ คอมโพเนนต์โดยไม่ต้องส่งผ่าน Props

import React, { useContext } from 'react';

const UserContext = React.createContext();

function UserProfile() {
  const user = useContext(UserContext);
  return <h1>ชื่อผู้ใช้: {user.name}</h1>;
}

function App() {
  const user = { name: 'Alice', age: 25 };

  return (
    <UserContext.Provider value={user}>
      <UserProfile />
    </UserContext.Provider>
  );
}

export default App;

อธิบาย:

• useContext ใช้ในการดึงข้อมูลจาก UserContext ที่ถูกกำหนดไว้ใน UserContext.Provider

การใช้งาน Memoization Hook (useMemo และ useCallback)#

ในบางครั้งการคำนวณค่าใหม่ทุกครั้งเมื่อคอมโพเนนต์ rerender อาจทำให้เกิดประสิทธิภาพที่ต่ำ useMemo และ useCallback ช่วยให้เราสามารถบันทึกผลลัพธ์ของการคำนวณหรือฟังก์ชันเพื่อใช้ซ้ำได้

useMemo :

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

function ExpensiveCalculationComponent({ num }) {
  const expensiveCalculation = (num) => {
    console.log('คำนวณใหม่...');
    return num * 2;
  };

  const result = useMemo(() => expensiveCalculation(num), [num]);

  return <div>ผลลัพธ์: {result}</div>;
}

useCallback :

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

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

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return <button onClick={handleClick}>เพิ่มจำนวน: {count}</button>;
}

อธิบาย:

• useMemo จะบันทึกผลลัพธ์ของฟังก์ชันที่ถูกคำนวณไว้ และจะคำนวณใหม่ก็ต่อเมื่อค่าใน array ที่ส่งไปมีการเปลี่ยนแปลง
• useCallback จะบันทึกฟังก์ชัน และจะสร้างฟังก์ชันใหม่ก็ต่อเมื่อค่าที่กำหนดใน dependency array เปลี่ยนไป

การสร้าง Custom Hooks#

คุณสามารถสร้าง Hooks ของคุณเองได้ในรูปแบบ Custom Hooks เพื่อแบ่งปันการใช้งานโค้ดซ้ำๆ ในหลายคอมโพเนนต์ ตัวอย่างเช่น Custom Hook สำหรับการใช้งานการ fetch ข้อมูล:

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => setData(data));
  }, [url]);

  return data;
}

function App() {
  const data = useFetch('https://api.example.com/data');

  return <div>ข้อมูล: {data ? JSON.stringify(data) : 'กำลังโหลด...'}</div>;
}

export default App;

อธิบาย:

• Custom Hook useFetch ใช้ในการดึงข้อมูลจาก API และส่งผลลัพธ์กลับไปยังคอมโพเนนต์ที่เรียกใช้งาน

สรุป#

React Hooks เป็นฟีเจอร์ที่ทำให้การจัดการสถานะ การทำงานของ side effects และฟังก์ชันอื่น ๆ ในฟังก์ชันคอมโพเนนต์มีประสิทธิภาพมากขึ้นและสะดวกกว่าเดิม โดยไม่จำเป็นต้องสร้าง class components ทำให้โค้ดสะอาดและเข้าใจง่ายขึ้น นอกจากนี้ Hooks ยังช่วยให้คุณสามารถสร้าง Custom Hooks เพื่อใช้งานซ้ำได้ในหลายๆ คอมโพเนนต์