React ตัวอย่างการสร้าง React useEffect Hooks Step-By-Step
React useEffect
ใน React ใช้สำหรับทำ Side effects ใน functional components ซึ่ง Side effects คือการดำเนินการที่เกิดขึ้นนอกขอบเขตของวงจรการ render ของคอมโพเนนต์ เช่น การดึงข้อมูลจาก API, การแก้ไข DOM โดยตรง, การตั้งค่า subscriptions, หรือการสร้างตัวจับเวลา นี่คือการใช้งาน
ตัวอย่างโครงสร้าง
|
1 2 3 4 5 6 7 8 9 10 11 |
import React, { useEffect } from 'react'; function MyComponent() { useEffect(() => { // โค้ด side effect ที่นี่ }); return ( // JSX สำหรับการ render คอมโพเนนต์ ); } |
ตัวอย่างการใช้ useEffect
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import React, { useState, useEffect } from 'react'; function Timer() { const [count, setCount] = useState(0); useEffect(() => { setTimeout(() => { setCount((count) => count + 1); }, 1000); }); return <h1>I've rendered {count} times!</h1>; } export default Timer; |
React useEffect Hooks
- No dependency
useEffect(() => {
//Runs on every render
}); - An empty array
useEffect(() => {
//Runs only on the first render
}, []); - Props or state values
useEffect(() => {
//Runs on the first render
//And any time any dependency value changes
}, [prop, state]);
Effect Cleanup
side effects ต้องการการทำความสะอาดเพื่อลด memory leaks การทำความสะอาดเช่นการลบ timeouts, subscriptions, event listeners, และ side effects อื่น ๆ ที่ไม่ได้ใช้อีกต่อไปควรถูกกำจัดโดยการรวมฟังก์ชัน return ที่ส่วนท้ายของ useEffect Hook นี้ด้วย นั่นหมายความว่าเมื่อ effect ถูกกำหนดให้ทำความสะอาดเอง ฟังก์ชันที่ถูก return จะถูกเรียกเมื่อ component ถูก unmount หรือเมื่อ effect ถูกเรียกใหม่เนื่องจากมีการเปลี่ยนแปลงของ dependencies ที่ระบุไว้ ซึ่งจะทำให้ side effects เหล่านี้ถูกทำลายและไม่เกิด memory leaks ในระยะยาว
ตัวอย่าง
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import { useState, useEffect } from "react"; function Timer() { const [count, setCount] = useState(0); useEffect(() => { let timer = setTimeout(() => { setCount((count) => count + 1); }, 1000); return () => clearTimeout(timer) }, []); return <h1>I've rendered {count} times!</h1>; } export default Timer; |
useRef
- คุณสามารถใช้ useRef Hook เพื่อรักษาค่าระหว่างการ render ต่าง ๆ
- มันสามารถใช้เก็บค่าที่เปลี่ยนแปลงได้โดยไม่ทำให้เกิดการ render ใหม่เมื่อมีการอัปเดต
- มันสามารถใช้เข้าถึง element ของ DOM โดยตรงได้
ตัวอย่าง
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import { useState, useEffect, useRef } from "react"; function App() { const [inputValue, setInputValue] = useState(""); const count = useRef(0); useEffect(() => { count.current = count.current + 1; }); return ( <> <input type="text" value={inputValue} onChange={(e) => setInputValue(e.target.value)} /> <h1>Render Count: {count.current}</h1> </> ); } export default App; |
สนใจจ้างพัฒนาระบบ เขียนระบบ
ทำเว็บไซต์ รับสอนเขียนโปรแกรม
inbox มาที่เพจ หรือติดต่อ 098-373-8651
ช่องทางการชำระเงิน
เงินสด หรือ e-banking
ธนาคารกสิกรไทย
เลขบัญชี : 0951168564
ชื่อบัญชี : นายวัยวุฒิ ชุมเมืองปัก
