এখন পর্যন্ত সবকিছু হয় render-এর সময় (JSX হিসাব করা) নয়তো একটি ব্যবহারকারীর ইভেন্টের সাড়ায় (একটি ক্লিক, একটি কীস্ট্রোক) ঘটে। Effect তৃতীয় একটি কেসের জন্য: এমন কোড যা একটি কম্পোনেন্ট render হয়েছে বলে চালানো দরকার — একেবারে React-এর বাইরের কিছুর সাথে কথা বলা, যেমন একটি API, একটি টাইমার, বা ব্রাউজারের document।
import { useState, useEffect } from 'react';
function PageTitle({ title }) {
useEffect(() => {
document.title = title;
});
return <h1>{title}</h1>;
}দ্বিতীয় আর্গুমেন্ট ছাড়া, এই effect প্রতিটি render-এর পরে চলে — সাধারণত আসলে যা প্রয়োজন তার চেয়ে বেশি বার।
দ্বিতীয় একটি আর্গুমেন্ট — মানের একটি অ্যারে — React-কে বলে শুধু তখনই effect আবার চালাতে যখন সেই মানগুলোর একটি শেষ render থেকে আসলেই বদলেছে:
useEffect(() => {
document.title = title;
}, [title]); // only re-runs when title changes, not on every render| Dependency array | চলে |
|---|---|
| (কোনোটা নেই) | প্রতিটি একক render-এর পরে |
| [] | একবার, প্রথম render-এর ঠিক পরে, আর কখনো না |
| [title] | প্রথম render-এর পরে, আর যখনই title বদলায় তখনও |
exhaustive-deps warning চুপ করাবেন না
ESLint-এর React নিয়ম এমন একটি dependency array flag করবে যাতে effect আসলে ব্যবহার করে এমন একটি মান নেই — এটা কোনো খুঁতখুঁতে নিয়ম নয়, এটা একটি আসল বাগ ধরছে: effect বর্তমান মানের বদলে আগের render-এর একটি stale, পুরনো মান ব্যবহার করতে থাকবে। effect নিজের বাইরে থেকে যা পড়ে তার সবকিছু অন্তর্ভুক্ত করুন।
একটি effect থেকে একটি ফাংশন রিটার্ন করলে React-কে এটি আবার চালানোর আগে, আর কম্পোনেন্টটি পাতা থেকে সরানো হলে চালানোর মতো কিছু দেয় — একটি টাইমার বাতিল করা, একটি কানেকশন বন্ধ করা, বা একটি ইভেন্ট লিসেনার সরানোর প্রচলিত জায়গা:
function Timer() {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const id = setInterval(() => setSeconds((s) => s + 1), 1000);
return () => clearInterval(id); // cleanup — runs when the component unmounts
}, []);
return <p>{seconds} seconds elapsed</p>;
}এই cleanup ছাড়া, Timer কম্পোনেন্ট চলে যাওয়ার পরেও ইন্টারভালটা চলতেই থাকবে — একটি প্রকৃত মেমরি লিক, শুধু একটি স্টাইল সমস্যা নয়।
একটি মান যদি render-এর সময় props বা state থেকে সরাসরি হিসাব করা যায়, render-এর সময় সেটা হিসাব করুন — এক state থেকে আরেকটি sync করতে useEffect-এর দিকে যাবেন না। পরের পাঠ, Fetching Data, useEffect-এর সবচেয়ে সাধারণ বৈধ ব্যবহার।