useEffectตะขอตอบสนอง

ตัวอย่าง:

ใช้setTimeout()เพื่อนับ 1 วินาทีหลังจากการเรนเดอร์เริ่มต้น:

import { useState, useEffect } from "react";
import ReactDOM from "react-dom";

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

  useEffect(() => {
    setTimeout(() => {
      setCount((count) => count + 1);
    }, 1000);
  });

  return <h1>I've rendered {count} times!</h1>;
}

ReactDOM.render(<Timer />, document.getElementById('root'));

1. ไม่มีการพึ่งพาผ่าน:

useEffect(() => {
  //Runs on every render
});

2. อาร์เรย์ว่าง:

useEffect(() => {
  //Runs only on the first render
}, []);

3. อุปกรณ์ประกอบฉากหรือค่าสถานะ:

useEffect(() => {
  //Runs on the first render
  //And any time any dependency value changes
}, [prop, state]);

ตัวอย่าง:

เรียกใช้เอฟเฟกต์ในการเรนเดอร์เริ่มต้นเท่านั้น:

import { useState, useEffect } from "react";
import ReactDOM from "react-dom";

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

  useEffect(() => {
    setTimeout(() => {
      setCount((count) => count + 1);
    }, 1000);
  }, []); // <- add empty brackets here

  return <h1>I've rendered {count} times!</h1>;
}

ReactDOM.render(<Timer />, document.getElementById('root'));

ตัวอย่าง:

นี่คือตัวอย่างของuseEffectHook ที่ขึ้นอยู่กับตัวแปร หากcountตัวแปรอัปเดต เอฟเฟกต์จะทำงานอีกครั้ง:

import { useState, useEffect } from "react";
import ReactDOM from "react-dom";

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

  useEffect(() => {
    setCalculation(() => count * 2);
  }, [count]); // <- add the count variable here

  return (
    <>
      <p>Count: {count}</p>
      <button onClick={() => setCount((c) => c + 1)}>+</button>
      <p>Calculation: {calculation}</p>
    </>
  );
}

ReactDOM.render(<Counter />, document.getElementById('root'));

ตัวอย่าง:

ทำความสะอาดตัวจับเวลาที่ส่วนท้ายของuseEffectตะขอ:

import { useState, useEffect } from "react";
import ReactDOM from "react-dom";

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>;
}

ReactDOM.render(<Timer />, document.getElementById("root"));