Frontend Academy · บทเรียน

Hook useState: สถานะและการเรนเดอร์ซ้ำ

เรียกใช้ useState เพื่อเพิ่มสถานะภายในให้คอมโพเนนต์ อัปเดตสถานะด้วยฟังก์ชัน setter และทำความเข้าใจว่า React จะเรนเดอร์ซ้ำเมื่อใดและเพราะเหตุใด

บทเรียน 3 จาก 413 ขั้นตอน

Hook useState: สถานะและการเรนเดอร์ซ้ำ เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

State คืออะไร

State คือข้อมูลที่เปลี่ยนแปลงตามเวลาและควรทำให้ส่วนติดต่อผู้ใช้อัปเดตเมื่อข้อมูลเปลี่ยน ต่างจากตัวแปรทั่วไป การเปลี่ยนแปลง state จะทำให้ React แสดงผลคอมโพเนนต์ใหม่ด้วยค่าใหม่

ไวยากรณ์ useState

useState(initialValue) คืนค่าทูเพิลที่ประกอบด้วยค่าปัจจุบันและฟังก์ชันตั้งค่า ให้แยกโครงสร้างค่าทั้งสองทันที

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // initial value: 0

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

TypeScript: การกำหนดชนิดข้อมูลให้ useState

TypeScript จะอนุมานชนิดข้อมูลจากค่าเริ่มต้น เมื่อค่าเริ่มต้นกำกวม เช่น null หรืออาร์เรย์ว่าง ให้เพิ่มพารามิเตอร์ชนิดข้อมูลอย่างชัดเจน

const [count, setCount] = useState(0);           // inferred: number
const [name, setName]  = useState('');            // inferred: string
const [user, setUser]  = useState<User | null>(null); // explicit
const [items, setItems] = useState<string[]>([]); // explicit

การแสดงผลใหม่เมื่อ State เปลี่ยน

การเรียกฟังก์ชันตั้งค่าจะกำหนดให้แสดงผลใหม่ React จะเรียกฟังก์ชันคอมโพเนนต์ของคุณอีกครั้งพร้อมค่า state ใหม่ JSX ที่คืนค่าจะเข้ามาแทนที่การแสดงผลก่อนหน้าใน DOM เสมือน

การอัปเดต State ทำงานแบบไม่พร้อมกัน

การอัปเดต state จะถูกรวมกลุ่มและนำไปใช้ก่อนการแสดงผลครั้งถัดไป ไม่ได้เกิดขึ้นทันที อย่าอ่านค่า state ที่อัปเดตแล้วภายในตัวจัดการเหตุการณ์เดียวกัน เพราะค่าใหม่จะยังไม่พร้อมใช้งานจนกว่าจะถึงการแสดงผลครั้งถัดไป

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

function handleClick() {
  setCount(count + 1);
  console.log(count); // still 0 — update hasn't applied yet
}

การอัปเดตแบบฟังก์ชัน

เมื่อ state ใหม่ขึ้นอยู่กับ state ก่อนหน้า ให้ใช้รูปแบบฟังก์ชันของตัวตั้งค่า วิธีนี้ช่วยหลีกเลี่ยงข้อผิดพลาดจากคลอสเชอร์ที่เป็นค่าเก่า

// Risky (stale closure in async callbacks):
setCount(count + 1);

// Safe (functional update):
setCount(prev => prev + 1);

// Important for buttons that fire rapidly:
function increment() {
  setCount(c => c + 1); // always uses the latest value
}

State กับอ็อบเจ็กต์

เมื่อ state เป็นอ็อบเจ็กต์ ให้สร้างอ็อบเจ็กต์ใหม่เสมอ อย่าเปลี่ยนแปลงอ็อบเจ็กต์เดิมโดยตรง React เปรียบเทียบด้วยการอ้างอิง ดังนั้นการเปลี่ยนแปลงโดยตรงจะไม่ทำให้แสดงผลใหม่

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

// WRONG: mutates state — React won't re-render
user.age = 31;
setUser(user); // same reference!

// CORRECT: new object
setUser({ ...user, age: 31 });

ตัวแปร State หลายตัว

เรียกใช้ useState หลายครั้งสำหรับตัวแปร state ที่เป็นอิสระต่อกัน วิธีนี้สะอาดกว่าการใช้อ็อบเจ็กต์ state ขนาดใหญ่เพียงตัวเดียว เมื่อค่าต่าง ๆ ไม่ได้เปลี่ยนพร้อมกัน

const [name, setName]   = useState('');
const [email, setEmail] = useState('');
const [error, setError] = useState<string | null>(null);
const [loading, setLoading] = useState(false);

การเริ่มต้นแบบขี้เกียจ

หากการคำนวณค่า state เริ่มต้นใช้เวลาสูง ให้ส่งฟังก์ชันไปยัง useState ฟังก์ชันนั้นจะทำงานเฉพาะในการแสดงผลครั้งแรก ไม่ใช่ทุกครั้งที่แสดงผลใหม่

// Runs getInitialState() on every render (bad if expensive):
const [state, setState] = useState(getInitialState());

// Lazy init: only runs once:
const [state, setState] = useState(() => getInitialState());

เมื่อใดไม่ควรใช้ State

ตัวแปรทุกตัวไม่จำเป็นต้องเป็น state ค่าที่คำนวณจากข้อมูลอื่น เช่น total = items.reduce(…) ควรคำนวณระหว่างการแสดงผล ไม่ใช่เก็บไว้ใน state การสร้าง state จากพร็อพส์มักเป็นสัญญาณของการออกแบบที่ซับซ้อนเกินจำเป็น

การยก State ขึ้น

เมื่อคอมโพเนนต์พี่น้องสองตัวต้องใช้ state ร่วมกัน ให้ยก state ไปไว้ที่บรรพบุรุษร่วม แล้วส่งลงมาเป็นพร็อพส์ นี่คือรูปแบบพื้นฐานในการจัดการ state ของ React ก่อนจะเลือกใช้ context หรือ store

ตรวจสอบอย่างรวดเร็ว

เหตุใดจึงควรใช้รูปแบบฟังก์ชัน setCount(prev => prev + 1) แทน setCount(count + 1)

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุป: useState

useState คืนค่า [value, setter] ค่าเริ่มต้นจะกำหนดชนิดข้อมูล หรือใช้ generic ที่ระบุอย่างชัดเจน ตัวตั้งค่าจะทำให้แสดงผลใหม่ ใช้การอัปเดตแบบฟังก์ชันเมื่อ state ใหม่ขึ้นอยู่กับค่าเดิม สำหรับอ็อบเจ็กต์ ให้กระจายค่าไปเป็นอ็อบเจ็กต์ใหม่เสมอและอย่าเปลี่ยนแปลงอ็อบเจ็กต์เดิม ใช้การเริ่มต้นแบบขี้เกียจสำหรับการคำนวณที่ใช้เวลาสูง ยก state ไปไว้ที่บรรพบุรุษร่วมเมื่อคอมโพเนนต์พี่น้องต้องใช้ state ร่วมกัน

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 41
บทเรียน: 163

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “Hook useState: สถานะและการเรนเดอร์ซ้ำ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “Hook useState: สถานะและการเรนเดอร์ซ้ำ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “Hook useState: สถานะและการเรนเดอร์ซ้ำ”

เรียกใช้ useState เพื่อเพิ่มสถานะภายในให้คอมโพเนนต์ อัปเดตสถานะด้วยฟังก์ชัน setter และทำความเข้าใจว่า React จะเรนเดอร์ซ้ำเมื่อใดและเพราะเหตุใด คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “Hook useState: สถานะและการเรนเดอร์ซ้ำ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Frontend Academy