useEffect Hook Example In React In Hindi

If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.

ReactJS में useEffect hook एक powerful tool है जो functional components में side effects को manage करने में help करता है।

Side effects में कुछ भी हो सकता है जो component के render के बाद या component के lifecycle के अलग phases पर execute होता है, जैसे कि data fetching, DOM manipulation, subscription, timers, etc.

useEffect hook के आने से पहले, यह सब functionality सिर्फ class components में ही manage कि जा सकती थी, लेकिन hooks के साथ, हम functional components में भी lifecycle methods का use कर सकते हैं।

●●●

What is useEffect Hook ?

useEffect hook एक React function है जो functional components में side effects को handle करता है। इस hook को component के render hone के बाद execute किया जाता है और जब भी specified dependencies में changes आते हैं, ये hook दोबारा execute होता है।

React में useEffect hook component के lifecycle events को mimic करता है जैसे -

• componentDidMount - जब component pehli बार render होता है।

• componentDidUpdate - जब component re-render होता है या state/props में कोई change आता है।

• componentWillUnmount - जब component unmount होता है।

React useEffect Hook Syntax

useEffect(() => {
  // Side effect code
}, [dependencies]);

यहां

useEffect एक function को accept करता है जो side effect code को wrap करता है। Dependencies array specify करता है कि किन values के change hone पर effect को दोबारा execute करना है।

• अगर dependencies empty array [] है, तो effect सिर्फ एक बार execute होगा जब component mount होगा।

• अगर कोई dependencies specify नहीं कि गयी हैं, तो effect हर render पर execute होगा।

●●●

React useEffect Example

सबसे पहला example एक simple timer का है जो component के render होने पर हर second execute होगा।

File : src/components/Timer.js

Copy
import React, { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds((prevSeconds) => prevSeconds + 1);
    }, 1000);

    return () => clearInterval(interval); // Cleanup on unmount
  }, []); // Empty dependency array means it runs only once

  return (
    <div>
      <h2>Timer: {seconds} seconds</h2>
    </div>
  );
}

export default Timer;

Explanation

• useEffect में हमने setInterval timer set किया है जो हर second seconds को increment करता है।

• return () => clearInterval(interval); cleanup function है जो component के unmount hone पर interval को clear करता है।

• Empty dependency array [] की वजह से ये effect सिर्फ एक बार run होता है जब component mount होता है।

●●●

Running useEffect Only When Dependencies Change

कभी-कभी हमें useEffect को सिर्फ specific dependencies change होने पर ही run करना होता है। इस case में हम dependencies array में वो state या props specify करते हैं जो change hone पर effect execute हो।

File : src/components/Counter.js

Copy
import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    console.log(`Count has been updated: ${count}`);
  }, [count]); // Only run when count changes

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

export default Counter;

Explanation

• useEffect में count dependency specify कि गयी है, इसलिए जब भी count update होता है, ये effect execute होता है।

• Console में message display होता है जब count change होता है।

●●●

Fetching Data with useEffect

React applications में commonly useEffect hook का use data fetching के लिए होता है।

useEffect को empty dependency array [] के साथ use करके हम data fetching operation को सिर्फ component के initial render पर run कर सकते हैं।

File : src/components/UserList.js

Copy
import React, { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    async function fetchUsers() {
      const response = await fetch('https://jsonplaceholder.typicode.com/users');
      const data = await response.json();
      setUsers(data);
    }
    fetchUsers();
  }, []); // Empty dependency array ensures this only runs once

  return (
    <div>
      <h2>User List</h2>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;

Explanation

• fetchUsers function asynchronous request send करता है और data को setUsers के through state में store करता है।

• useEffect hook में empty dependency array [] है, जो ensure करता है कि data fetch operation सिर्फ एक बार run हो जब component mount होता है।

●●●

Cleaning Up Side Effects

React में अगर हमें component unmount होने पर कोई clean-up करना हो, जैसे subscriptions को cancel करना या timers को clear करना, तो useEffect में clean-up function define किया जाता है।

File : src/components/MouseTracker.js

Copy
import React, { useState, useEffect } from 'react';

function MouseTracker() {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const updatePosition = (e) => {
      setPosition({ x: e.clientX, y: e.clientY });
    };

    window.addEventListener('mousemove', updatePosition);

    return () => {
      window.removeEventListener('mousemove', updatePosition);
    };
  }, []); // Run only once on mount

  return (
    <div>
      <h2>Mouse Position</h2>
      <p>X: {position.x}, Y: {position.y}</p>
    </div>
  );
}

export default MouseTracker;

Explanation

• updatePosition function mouse कि position को state में update करता है जब भी mousemove event trigger होता है।

• useEffect का return statement window.removeEventListener('mousemove', updatePosition) के साथ clean-up function define करता है जो component के unmount hone पर execute होता है।

●●●

Using useEffect with Multiple Effects

React में multiple useEffect hooks को एक ही component में use किया जा सकता है, जिसमे अलग-अलग side effects को handle किया जाता है।

File : src/components/MultiEffect.js

Copy
import React, { useState, useEffect } from 'react';

function MultiEffect() {
  const [count, setCount] = useState(0);
  const [title, setTitle] = useState('React App');

  useEffect(() => {
    console.log(`Count has changed to ${count}`);
  }, [count]);

  useEffect(() => {
    document.title = title;
  }, [title]);

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <br />
      <input
        type="text"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        placeholder="Change Document Title"
      />
    </div>
  );
}

export default MultiEffect;

Explanation

• पहला useEffect count dependency के साथ defined है और console पर message display करता है जब भी count change होता है।

• दूसरा useEffect document title को update करता है जब title change होता है।

●●●