การใช้งาน React Hooks ในการจัดการ State

สารจากนักเขียน

หนึ่งในความสำคัญของ React คือการจัดการ state ของแอพพลิเคชัน เพื่อให้ UI แสดงผลตรงตามที่ต้องการและสามารถตอบสนองกับการกระทำของผู้ใช้ได้อย่างถูกต้องและมีประสิทธิภาพ ในบทความนี้เราจะศึกษาถึงการใช้งาน React Hooks ซึ่งเป็นเครื่องมือที่สำคัญในการจัดการ state ของแอพพลิเคชันใน React อย่างง่ายและมีประสิทธิภาพมากยิ่งขึ้น

เขียนโดย

Brothermos

Frontend Developer @ ODDS

บทความนี้ตีพิมพ์ และ เผยแพร่เมื่อ 31 ตุลาคม 2023

Share Tweet

การทำความเข้าใจ React Hooks

• React Hooks เป็นฟีเจอร์ที่ถูกเสนอใน React 16.8 เพื่อให้นักพัฒนาสามารถใช้งาน state และ lifecycle ใน functional components โดยไม่ต้องใช้ class components ซึ่งทำให้การจัดการ state และผลกระทบต่อ UI ทำได้สะดวกและรวดเร็วมากยิ่งขึ้น

• React Hooks มี hooks หลักที่นิยมใช้คือ useState เพื่อจัดการ state และ useEffect เพื่อจัดการ lifecycle ของ component นอกจากนี้ยังมี hooks อื่นๆ เช่น useContext, useReducer, และ useRef ที่มีประโยชน์ในการจัดการ state และการเข้าถึง DOM และการทำงานของ component ใน React

วิธีเริ่มต้นการใช้งาน React Hooks สำหรับจัดการ State

1. การใช้งาน useState เพื่อสร้าง State Variable

ในการเริ่มต้นใช้งาน React Hooks เพื่อจัดการ state ใน component, เราจะใช้ useState เพื่อสร้าง state variable และฟังก์ชันที่ใช้ในการอัพเดท state นั้น ๆ

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default Counter;

2. การอัพเดท State ด้วย setState Function

เพื่ออัพเดทค่าของ state variable, เราใช้ setState function ที่ได้จาก useState เพื่ออัพเดทค่า state

<button onClick={() => setCount(count + 1)}>Increment</button>

3. การจัดการ State ที่มีความซับซ้อน

React Hooks สามารถใช้ในการจัดการ state ที่มีความซับซ้อนได้ เช่น state ที่เป็น object หรือ array โดยการให้ state variable เป็น object หรือ array นั้น ๆ

const [user, setUser] = useState({ name: '', age: 0 });

const handleInputChange = (event) => {
  const { name, value } = event.target;
  setUser({ ...user, [name]: value });
};

สรุป

React Hooks เป็นเครื่องมือที่สำคัญในการจัดการ state ของแอพพลิเคชันใน React ทำให้การทำงานกับ state และ lifecycle ของ component เป็นเรื่องง่ายและมีประสิทธิภาพมากขึ้น การใช้งาน useState สามารถทำให้เราสร้าง state variable และอัพเดทค่า state ได้อย่างสะดวกและเข้าใจง่าย นอกจากนี้ยังสามารถจัดการ state ที่มีความซับซ้อนได้โดยอีกเช่นกัน.