प्रतिक्रिया 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'));

उदाहरण:

यहां एक 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"));