ReactIntermediate

useEffect ও Side Effects

useEffect কীভাবে কাজ করে — dependency array, cleanup, fetch pattern — বাংলায়।

9টি অংশবাংলা ভাষায়

Side effect কী?

Rendering-এর বাইরে যেসব কাজ — network request, timer, localStorage, DOM ম্যানিপুলেশন, subscription — সেগুলো side effect। এগুলো component body-তে সরাসরি করা যায় না; useEffect-এর ভেতরে করা হয়।

useEffect basicsjsx

jsx

import { useEffect, useState } from "react";

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // mount-এ চলে
    console.log("Component mounted");

    // cleanup — unmount/পরের চালনার আগে
    return () => console.log("Cleaning up");
  }, []); // dependency array

  return <div />;
}

Dependency array

Deps	কখন চলে
`[]`	শুধু mount-এ একবার
`[count]`	count বদলালে
(কিছু না দেওয়া)	প্রতিটি render-এ

Fetch pattern

Data fetching + cleanupjsx

jsx

function Profile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let cancelled = false; // race condition আটকাতে

    setLoading(true);
    fetch("/api/users/" + userId)
      .then((r) => r.json())
      .then((data) => {
        if (!cancelled) setUser(data);
      })
      .finally(() => {
        if (!cancelled) setLoading(false);
      });

    return () => {
      cancelled = true; // cleanup
    };
  }, [userId]); // userId বদলালে আবার fetch

  if (loading) return <p>Loading…</p>;
  return <h1>{user?.name}</h1>;
}

StrictMode double

দ্বিগুণ ডেভ রান

ডেভেলপমেন্টের StrictMode-এ effect mount-এ দুবার চলে — এটা স্বাভাবিক; production-এ একবার। তাই effect-কে idempotent (বারবার চালালেও একই ফল) রাখুন, যেমন cleanup দিয়ে timer/request বাতিল।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।