رد الفعل useEffectهوكس

مثال:

تُستخدم setTimeout()لحساب ثانية واحدة بعد التصيير الأولي:

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'));

مثال:

فيما يلي مثال على useEffectخطاف يعتمد على متغير. إذا تم 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"));