RandomActs

Learning (Firebase Authentication):

Firebase Authentication দিয়ে user তৈরি করার পর যদি updateProfile ব্যবহার করে displayName আর photoURL সেট করি, সাথে সাথে কিন্তু onAuthStateChanged সেই নতুন ডেটা reflect করে না।

🔑 সমাধান 👉
1️⃣ updateProfile করার পর ম্যানুয়ালি setUserInfo(auth.currentUser) কল করতে হবে।
অথবা,
2️⃣ auth.currentUser.reload() দিয়ে fresh data ফেচ করে আবার setUserInfo করতে হবে।

👉 Industry practice এ বেশিরভাগ ডেভেলপার directly update করে state সেট করা approach ফলো করে, কারণ এটা সহজ আর predictable.

💡 ছোট learning হলেও real-life project এ এই জিনিসটা না জানলে বারবার debug করতে হয়।

𝐍𝐨𝐝𝐞.𝐣𝐬 & 𝐄𝐱𝐩𝐫𝐞𝐬𝐬.𝐣𝐬 𝐂𝐨𝐧𝐜𝐞𝐩𝐭𝐬 𝐒𝐢𝐦𝐩𝐥𝐢𝐟𝐢𝐞𝐝

👉 অনেক সময় ডেভেলপারদের মধ্যে কিছু টার্ম নিয়ে কনফিউশন তৈরি হয়, যেমনnpm init, npm install, callback function, fallback function, বা Express.js এর app.get/app.post এর ভিতরের function টা আসলে কী!

চলুন সহজ করে দেখি 👇 —

🔹 npm init বনাম npm install
-> npm init ➝ নতুন প্রজেক্ট শুরু করতে, package.json তৈরি করে।
-> npm install ➝ কোনো প্যাকেজ/লাইব্রেরি ইনস্টল করতে, node_modules + package-lock.json আপডেট করে।

🔹𝐂𝐚𝐥𝐥𝐛𝐚𝐜𝐤 𝐅𝐮𝐧𝐜𝐭𝐢𝐨𝐧
👉 অন্য ফাংশনের ভেতরে পাঠানো ফাংশন, যেটা পরবর্তীতে call হয়।

𝐚𝐩𝐩.𝐠𝐞𝐭('/𝐚𝐛𝐨𝐮𝐭', (𝐫𝐞𝐪, 𝐫𝐞𝐬) => {
𝐫𝐞𝐬.𝐬𝐞𝐧𝐝("𝐀𝐛𝐨𝐮𝐭 𝐏𝐚𝐠𝐞");
});

এখানে (req, res) => {} হলো callback function

🔹 𝐅𝐚𝐥𝐥𝐛𝐚𝐜𝐤 𝐅𝐮𝐧𝐜𝐭𝐢𝐨𝐧
👉 Backup হিসেবে কাজ করে। যদি কোনো route match না করে বা error হয়, তখন fallback function চলে।

𝐚𝐩𝐩.𝐮𝐬𝐞((𝐫𝐞𝐪, 𝐫𝐞𝐬) => {
𝐫𝐞𝐬.𝐬𝐭𝐚𝐭𝐮𝐬(𝟒𝟎𝟒).𝐬𝐞𝐧𝐝("𝐑𝐨𝐮𝐭𝐞 𝐧𝐨𝐭 𝐟𝐨𝐮𝐧𝐝!");
});

⚡ 𝐄𝐱𝐩𝐫𝐞𝐬𝐬.𝐣𝐬 𝐑𝐞𝐪𝐮𝐞𝐬𝐭 𝐅𝐥𝐨𝐰

𝐂𝐥𝐢𝐞𝐧𝐭 𝐑𝐞𝐪𝐮𝐞𝐬𝐭
|
𝐯
𝐌𝐢𝐝𝐝𝐥𝐞𝐰𝐚𝐫𝐞 (𝐥𝐨𝐠𝐠𝐞𝐫, 𝐛𝐨𝐝𝐲𝐏𝐚𝐫𝐬𝐞𝐫 𝐞𝐭𝐜.)
|
𝐯
𝐑𝐨𝐮𝐭𝐞 𝐇𝐚𝐧𝐝𝐥𝐞𝐫 (𝐂𝐚𝐥𝐥𝐛𝐚𝐜𝐤 𝐅𝐮𝐧𝐜𝐭𝐢𝐨𝐧)
|
└──> যদি 𝐫𝐨𝐮𝐭𝐞 না মিলে বা 𝐞𝐫𝐫𝐨𝐫 হয়
|
𝐯
𝐅𝐚𝐥𝐥𝐛𝐚𝐜𝐤 𝐅𝐮𝐧𝐜𝐭𝐢𝐨𝐧 (𝟒𝟎𝟒/𝐄𝐫𝐫𝐨𝐫)

✅ সংক্ষেপে:

Callback = কাজ শেষ হলে আমাকে ডাকো।
Fallback = আসলটা ব্যর্থ হলে আমাকে ডাকো।
npm init = প্রজেক্ট শুরু।
npm install = dependency যোগ।

🖥️ Runtime Environment আসলে কী?

অনেকেই কোড লেখেন, কিন্তু runtime environment আসলে কী সেটা নিয়ে পরিষ্কার ধারণা থাকে না। চলুন সহজভাবে বুঝি 👇

🔹 Runtime Environment কী?

এটা হলো সেই পরিবেশ, যেখানে আপনার লেখা কোড চালানো হয়।
এখানে থাকে:

->Language Engine (কোড চালানোর জন্য)

->Libraries/Modules (extra ফাংশন ব্যবহারের জন্য)

->System Access (OS এর সাথে connect করার জন্য)

🔹 উদাহরণ

✅ Browser Runtime (JS in Chrome/Firefox):

->Engine: V8 Engine
->Extra Tools: DOM, window, fetch
->ব্যবহার: ওয়েবপেজে JS চালানো

✅ Node.js Runtime (JS in server):

->Engine: V8 Engine
->Extra Tools: fs, http, os
->ব্যবহার: Server, API, File System

🔹 সহজ উপমা
ভাবুন আপনি একজন অভিনেতা (কোড) 🎭 আপনাকে অভিনয় করতে হলে দরকার হবে মঞ্চ, আলো, সাউন্ড সিস্টেম (runtime environment) । মঞ্চ ছাড়া একজন অভিনেতা কিছুই করতে পারবেন না।

👉 তাই এক কথায়:
Runtime Environment = আপনার কোড চালানোর জন্য দরকারি পরিবেশ + টুলস।

📌 এখন যদি কেউ জিজ্ঞেস করে:
"Node.js কী?"
আপনি উত্তর দিতে পারবেন: Node.js হলো JavaScript এর জন্য একটি Runtime Environment, যা JS কে browser ছাড়াও server এ চালাতে দেয়।

𝐅𝐫𝐨𝐧𝐭𝐞𝐧𝐝 𝐯𝐬 𝐁𝐚𝐜𝐤𝐞𝐧𝐝 𝐑𝐨𝐮𝐭𝐞 — একই নাম, আলাদা কাজ!
ওয়েব ডেভেলপমেন্টে অনেকেই কনফিউজড হয়, যখন backend API path আর frontend route একইরকম হয়। যেমন:

// Backend (Express.js)
app.get('/about', (req, res) => {
res.send('This is backend about route');
})

// Frontend (React Router)
About

👉 দুটোতেই /about আছে, কিন্তু কাজ একেবারে আলাদা।

🔹 Backend Route:
-> সার্ভার এ ডাটা ম্যানেজ করে।
->উদাহরণ: http://localhost:5000/about → সার্ভার থেকে response আসবে।

🔹 Frontend Route:
-> ব্রাউজারে component দেখায়।
-> উদাহরণ: /about → React Router “About” component render করবে।

⚠️ সমস্যা কী?
যদি backend আর frontend দুটোই /about use করে, তবে conflict হতে পারে।

✅ সমাধান:
API এর জন্য আলাদা prefix ব্যবহার করা উচিত — যেমন:

app.get('/api/about', (req, res) => {
res.json({ info: "This is API About" });
})

👉 এতে frontend এর /about আর backend এর /api/about আলাদা থাকবে।

✨ সংক্ষেপে:
🔹 Frontend Route → Component render করে।
🔹 Backend Route → API response দেয়।
🔹 Prefix (/api/...) ব্যবহার করলে collision এড়ানো যায়।

💡 তাই, একই path থাকলেও frontend vs backend route একে অপরের থেকে আলাদা জিনিস।

𝐂𝐨𝐧𝐧𝐞𝐜𝐭𝐢𝐧𝐠 𝐭𝐨 𝐌𝐨𝐧𝐠𝐨𝐃𝐁 𝐂𝐥𝐮𝐬𝐭𝐞𝐫 𝐰𝐢𝐭𝐡 𝐍𝐨𝐝𝐞.𝐣𝐬

𝟏. 𝐜𝐨𝐧𝐬𝐭 { 𝐌𝐨𝐧𝐠𝐨𝐂𝐥𝐢𝐞𝐧𝐭, 𝐒𝐞𝐫𝐯𝐞𝐫𝐀𝐩𝐢𝐕𝐞𝐫𝐬𝐢𝐨𝐧 } = 𝐫𝐞𝐪𝐮𝐢𝐫𝐞('𝐦𝐨𝐧𝐠𝐨𝐝𝐛');

-->MongoClient → MongoDB এর সাথে connect হওয়ার জন্য দরকার।
-->ServerApiVersion → MongoDB এর কোন API version use হবে সেটা বলে দেয়।
🔑 MongoDB এর সাথে কাজ করতে MongoClient আপনার main দরকারি class।

𝟐. 𝐜𝐨𝐧𝐬𝐭 𝐮𝐫𝐢 = "𝐦𝐨𝐧𝐠𝐨𝐝𝐛+𝐬𝐫𝐯://:@𝐜𝐥𝐮𝐬𝐭𝐞𝐫𝟎.𝟐𝐯𝐚𝐯𝐯𝐜𝐣.𝐦𝐨𝐧𝐠𝐨𝐝𝐛.𝐧𝐞𝐭/?𝐫𝐞𝐭𝐫𝐲𝐖𝐫𝐢𝐭𝐞𝐬=𝐭𝐫𝐮𝐞&𝐰=𝐦𝐚𝐣𝐨𝐫𝐢𝐭𝐲&𝐚𝐩𝐩𝐍𝐚𝐦𝐞=𝐂𝐥𝐮𝐬𝐭𝐞𝐫𝟎";

এটা হলো MongoDB Atlas Cluster এর ঠিকানা। মানে, এই URI হলো আপনার MongoDB Atlas এর দরজা খুলে দেওয়ার চাবি।

𝟑. 𝐜𝐨𝐧𝐬𝐭 𝐜𝐥𝐢𝐞𝐧𝐭 = 𝐧𝐞𝐰 𝐌𝐨𝐧𝐠𝐨𝐂𝐥𝐢𝐞𝐧𝐭(𝐮𝐫𝐢, {
𝐬𝐞𝐫𝐯𝐞𝐫𝐀𝐩𝐢: {
𝐯𝐞𝐫𝐬𝐢𝐨𝐧: 𝐒𝐞𝐫𝐯𝐞𝐫𝐀𝐩𝐢𝐕𝐞𝐫𝐬𝐢𝐨𝐧.𝐯𝟏,
𝐬𝐭𝐫𝐢𝐜𝐭: 𝐭𝐫𝐮𝐞,
𝐝𝐞𝐩𝐫𝐞𝐜𝐚𝐭𝐢𝐨𝐧𝐄𝐫𝐫𝐨𝐫𝐬: 𝐭𝐫𝐮𝐞,
}
});

এখানে আপনি MongoClient object বানালেন।
-> uri → কোথায় connect হবে সেটা জানায়।
->serverApi.version = v1 → MongoDB এর stable API version v1 fix করা হলো।
-> strict: true → কোনো ভুল হলে MongoDB strict ভাবে error দেখাবে।
->deprecationErrors: true → deprecated method use করলে error দেবে।
👉 এই object দিয়ে পরবর্তীতে আপনি connect, query, insert সব করতে পারবেন।

𝟒. 𝐚𝐬𝐲𝐧𝐜 𝐟𝐮𝐧𝐜𝐭𝐢𝐨𝐧 𝐫𝐮𝐧() {
𝐭𝐫𝐲 {
𝐚𝐰𝐚𝐢𝐭 𝐜𝐥𝐢𝐞𝐧𝐭.𝐜𝐨𝐧𝐧𝐞𝐜𝐭();
𝐚𝐰𝐚𝐢𝐭 𝐜𝐥𝐢𝐞𝐧𝐭.𝐝𝐛("𝐚𝐝𝐦𝐢𝐧").𝐜𝐨𝐦𝐦𝐚𝐧𝐝({ 𝐩𝐢𝐧𝐠: 𝟏 });
𝐜𝐨𝐧𝐬𝐨𝐥𝐞.𝐥𝐨𝐠("𝐏𝐢𝐧𝐠𝐞𝐝 𝐲𝐨𝐮𝐫 𝐝𝐞𝐩𝐥𝐨𝐲𝐦𝐞𝐧𝐭. 𝐘𝐨𝐮 𝐬𝐮𝐜𝐜𝐞𝐬𝐬𝐟𝐮𝐥𝐥𝐲 𝐜𝐨𝐧𝐧𝐞𝐜𝐭𝐞𝐝 𝐭𝐨 𝐌𝐨𝐧𝐠𝐨𝐃𝐁!");
} 𝐟𝐢𝐧𝐚𝐥𝐥𝐲 {
𝐚𝐰𝐚𝐢𝐭 𝐜𝐥𝐢𝐞𝐧𝐭.𝐜𝐥𝐨𝐬𝐞();
}
}

(i) await client.connect();

👉 এখানে MongoDB cluster এর সাথে connection establish করা হচ্ছে। মানে, আপনার অ্যাপ্লিকেশন আর MongoDB সার্ভারের মধ্যে একটা "door open" হলো।

(ii) await client.db("admin").command({ ping: 1 });

👉 এখন "admin" ডাটাবেসে গিয়ে ping command চালানো হচ্ছে।
ping: 1 → MongoDB কে basically বলা হচ্ছে “তুমি কি online আছো?”
যদি MongoDB সাড়া দেয়, তবে connection ঠিক আছে।

(iii) console.log("Pinged...");

👉 connection successful হলে কনসোলে success মেসেজ print হবে।

(iv) finally { await client.close(); }

👉 try ব্লকের কাজ শেষে বা কোনো error হলেও connection বন্ধ করে দেবে। কারণ connection খোলা রেখে দিলে memory leak বা unnecessary load হতে পারে।

𝟓. 𝐫𝐮𝐧().𝐜𝐚𝐭𝐜𝐡(𝐜𝐨𝐧𝐬𝐨𝐥𝐞.𝐝𝐢𝐫);

👉 run() ফাংশন কল করা হলো।
যদি error হয় (যেমন wrong password, internet নেই, cluster বন্ধ ইত্যাদি) → তাহলে .catch(console.dir) দিয়ে সেই error কনসোলে দেখাবে।

পুরো কোডটা আসলে কী করছে?

1. MongoDB driver import করছে।
2. আপনার cluster এর সাথে connection বানাচ্ছে।
3. একবার ping করে দেখে সার্ভার alive কিনা।
4. success হলে মেসেজ দেখাচ্ছে।
5.তারপর connection close করে দিচ্ছে।

Express.js কী?

Express.js হলো Node.js-এর উপর তৈরি একটি ওপেন-সোর্স ওয়েব অ্যাপ্লিকেশন ফ্রেমওয়ার্ক। এটি মূলত ওয়েব সার্ভার এবং API (Application Programming Interface) তৈরি করার জন্য ব্যবহৃত হয়।👉 একে অনেক সময় “Fast, unopinionated, minimalist web framework for Node.js” বলা হয়। মানে হলো, এটা খুব হালকা, দ্রুত, আর কোনো নির্দিষ্ট স্ট্রাকচার চাপিয়ে দেয় না। ডেভেলপার চাইলে নিজের মতো করে প্রোজেক্ট সাজাতে পারে।

Express.js কেন দরকার?

সাধারণভাবে Node.js দিয়েও সার্ভার বানানো যায় (http মডিউল ব্যবহার করে)। কিন্তু Node.js-এ সব কিছু ম্যানুয়ালি করতে হয় যেমন-

-->রিকোয়েস্ট-রেসপন্স হ্যান্ডেল করা,
-->রাউট ম্যানেজ করা
-->Middleware যোগ করা
-->Error হ্যান্ডেল করা
Express.js এগুলোকে অনেক সহজ, গুছানো এবং কম কোডে করতে সাহায্য করে।

Express.js কীভাবে কাজ করে?
Express.js মূলত Middleware এবং Routing কনসেপ্টের উপর কাজ করে।

1. Request-Response Cycle (রিকোয়েস্ট-রেসপন্স সাইকেল)যখন কোনো ক্লায়েন্ট (যেমন ব্রাউজার, Postman, বা অন্য অ্যাপ) সার্ভারে একটি HTTP request পাঠায়:
-->Express.js সেই রিকোয়েস্টকে গ্রহণ করে
-->তারপর বিভিন্ন middleware এর মধ্যে দিয়ে পাঠায়
-->সঠিক route handler খুঁজে বের করে
-->অবশেষে response পাঠিয়ে দেয় ক্লায়েন্টকে
এটাকে বলা হয় Request-Response Cycle।

2. Middleware (মিডলওয়্যার)
Middleware হচ্ছে Express-এর মূল ফিচার। এগুলো হলো ফাংশন, যেগুলো request এবং response-এর মাঝখানে কাজ করে। 👉 Middleware এর কাজগুলো হতে পারে:
-->Request data পড়া (body, params, query)
-->Authentication/Authorization করা
-->Logging করা
-->Error হ্যান্ডেল করা
-->Response modify করা
/* app.use(express.json()); // JSON ডাটা পার্স করার middleware */

3. Routing (রাউটিং)
Routing হলো, ক্লায়েন্ট কোন URL/Path-এ request পাঠিয়েছে তার উপর ভিত্তি করে সঠিক রেসপন্স পাঠানো।

/*
app.get('/', (req, res) => {
res.send('Hello World from Express.js');
});

app.post('/user', (req, res) => {
res.send('User data received');
});
*/

4. Error Handling (এরর হ্যান্ডলিং)
Express সহজে Error হ্যান্ডল করার সুযোগ দেয়।
একটা কাস্টম Middleware লিখে Error হ্যান্ডল করা যায়।

Express.js এর ফিচারসমূহ
✔️ সহজ এবং দ্রুত ওয়েব সার্ভার তৈরি
✔️ Middleware সাপোর্ট
✔️ Routing সিস্টেম
✔️ Template engine সাপোর্ট (EJS, Pug ইত্যাদি)
✔️ REST API সহজে তৈরি করা
✔️ Static files সার্ভ করা (HTML, CSS, JS, Images)

Express.js এর ব্যবহার কোথায় হয়?
-->RESTful API বানাতে
-->Backend for Frontend (React, Angular, Vue-এর সাথে)
-->Single Page Application (SPA) এর backend
-->Real-time apps (Socket.io এর সাথে)
-->Microservices architecture

/*
const express = require('express');
const app = express();
const port = 5000;

// Middleware
app.use(express.json());

// Route
app.get('/', (req, res) => {
res.send('Welcome to Express.js Server');
});

app.post('/data', (req, res) => {
res.json({ message: "Data received", data: req.body });
});

// Server listen
app.listen(port, () => {
console.log(`Server running on port ${port}`);
});
*/

𝗔𝗜 𝗧𝗼𝗼𝗹𝘀 𝗬𝗼𝘂’𝗿𝗲 𝗜𝗴𝗻𝗼𝗿𝗶𝗻𝗴 — 𝗯𝘂𝘁 𝗦𝗵𝗼𝘂𝗹𝗱𝗻'𝘁

Most people think using AI means just typing in ChatGPT and hoping for magic. But real productivity? That comes from knowing the right tools — and how to use them smartly.

Here are 3 underrated AI tools that can change the way you work, learn, or grow — especially if you're a student, creator, or professional:

🔹 1. Perplexity AI — AI + Internet = Real-time, cited research.

Perfect for writing reports, blogs, or solving technical questions with verified sources.

🔹 2. OpusClip — Want to turn long videos into viral shorts? Upload and get clips ready for YouTube Shorts or Reels.

Great for personal branding or marketing.

🔹 3. Notion AI — Planning, writing, summarizing, and even creating databases — all in one place.

Perfect for organized minds (or chaotic ones trying to be 👀).These aren’t just toys — they’re tools for smarter work. And the best part? Most are free or freemium. The earlier you start using them, the faster you move ahead.

Are there any tools you swear by?

Let’s build a useful list in the comments 👇

🔹 React Context API কী?
React Context API এমন একটি ব্যবস্থা, যার মাধ্যমে আপনি component tree-এর এক জায়গায় ডেটা সংরক্ষণ করে তা অনেক নিচের level-এর component-এ পাঠাতে পারেন, middle-level components দিয়ে props না পাঠিয়েই।

উদাহরণস্বরূপ, ধরুন আপনি একটি user object Navbar, Sidebar, Footer—সবখানে ব্যবহার করতে চান। তাহলে বারবার props দিয়ে পাঠানো না করে, একবার Context এ রেখে সব জায়গা থেকে access করা যায়।

🔹 কখন Context ব্যবহার করবেন?
যখন global state বা value ব্যবহারের দরকার হয় (যেমন: authentication info, theme, language preference)

->যখন multiple components একই data ব্যবহার করছে
->যখন prop drilling অতিরিক্ত জটিল হয়ে যাচ্ছে

🔹 কিভাবে Context তৈরি ও ব্যবহার করবেন?

✅ Step 1: Context তৈরি করা
import { createContext } from 'react';
const AuthContext = createContext();

✅ Step 2: Provider তৈরি করা
import React, { useState } from 'react';

export const AuthProvider = ({ children }) => {
const [user, setUser] = useState(null);

const login = (email, password) => {
// লগইন লজিক
};

const logout = () => {
// লগআউট লজিক
};

return (

{children}

);
};

✅ Step 3: Context use করা (Consumer Component-এ)
import { useContext } from 'react';
import { AuthContext } from './AuthProvider';

const Navbar = () => {
const { user, logout } = useContext(AuthContext);

return (

{user ? (

Welcome, {user.name}
Logout

) : (
Please log in
)}

);
};
✅ Step 4: Provider দিয়ে App কে wrap করা
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { AuthProvider } from './AuthProvider';

ReactDOM.createRoot(document.getElementById('root')).render(



);

🔹 Context API এর সুবিধা:
->🌐 Global state management সহজ হয়
->🚫 Prop drilling এড়ানো যায়
->🧹 কোড পরিষ্কার ও maintainable হয়

🔹 Context এর কিছু সীমাবদ্ধতা:
->বড় application-এ context অনেক হয়ে গেলে performance issue হতে পারে (frequent re-rendering)
->Redux বা Zustand এর মতো advanced features নেই (middleware, devtools, async handling)

🔹 useContext() vs Context.Consumer
✅ useContext() হলো hook, ফাংশনাল component-এ ব্যবহার হয়।
❌ Context.Consumer হলো পুরনো পদ্ধতি, একটু বেশি জটিল, এখন কম ব্যবহার হয়।

React Context API হলো ছোট থেকে মাঝারি app-এ global state handle করার জন্য অসাধারণ একটা feature। তবে বড়-scale app-এ হলে Redux, Zustand বা Jotai-এর মতো state management tool বেছে নেওয়া ভালো।

🔍 𝐑𝐞𝐚𝐜𝐭 𝐑𝐨𝐮𝐭𝐞𝐫 এ 𝐫𝐞𝐥𝐚𝐭𝐢𝐯𝐞 𝐩𝐚𝐭𝐡 𝐯𝐬 𝐚𝐛𝐬𝐨𝐥𝐮𝐭𝐞 𝐩𝐚𝐭𝐡 — ছোট ভুল, বড় ঝামেলা!

ধরা যাক, একটা project এ বর্তমানে user আছে এই route-এ: /category/1
এখন যদি component এর ভিতরে লেখা হয়:


➡️ এটা হচ্ছে একটি relative path
➡️ ফলে final URL হবে: /category/1/newsdetails/123

❗ কিন্তু যদি চাই এটা সরাসরি /newsdetails/123 route এ যাক, তখন দিতে হবে:


✅ এটা হলো একটি absolute path
✅ ফলে URL হবে exactly: /newsdetails/123

💡 মনে রাখার টিপস:
🔸 to="..." → Relative (current route এর সাথে যোগ হয়)
🔹 to="/..." → Absolute (root থেকে শুরু হয়)

📌 Lesson:
React Router এ nested routing এর সময় path structure বুঝে না দিলে, একটা ছোট slash এর ভুলে পুরো routing ভুল হতে পারে।
এই জিনিস especially নতুন dev দের জন্য খুব confusing হয়।

✅ একবার বুঝে ফেললে — future bug, broken route আর confusion, সব কমে যাবে!

📌 React এর useEffect Hook — একবার বুঝুন, বারবার ব্যবহার করুন
🔍 Side effects নিয়ে একটু গভীরভাবে জানি

React এ component গুলা মূলত state আর props দিয়ে UI render করে।
কিন্তু এমন অনেক কাজ থাকে যেগুলা rendering এর বাইরে ঘটে—🤔
এই কাজগুলোই হলো side effects, আর এই জন্যই আমরা use করি 👉 useEffect

💡 Side Effect মানে কী?
এগুলো এমন কাজ যা UI render কে directly affect করে না, কিন্তু অ্যাপের behavior এর জন্য দরকারি:
✔️ API থেকে data fetch করা
✔️ Event listener set করা
✔️ DOM manually manipulate করা
✔️ Browser title update করা
✔️ LocalStorage এ ডেটা রাখা

🧠 useEffect কিভাবে সাহায্য করে?
React render হওয়ার পর এই side effect গুলা handle করতে useEffect ব্যবহার হয়:
✅ Component mount হলে একবার চলাতে
✅ নির্দিষ্ট কোন value change হলে চলাতে
✅ Component unmount হবার আগেই clean up করতে

🔁 useEffect এর ৩টা Main Pattern:

1️⃣ useEffect(() => { ... })
📌 প্রতিবার render এ চলে। সাবধানে ব্যবহার করুন—loop হতে পারে।

2️⃣ useEffect(() => { ... }, [])
📌 Component mount হলে একবার চলে।
👉 API call, DOM setup এর জন্য best।

3️⃣ useEffect(() => { ... }, [value])
📌 শুধুমাত্র value পরিবর্তন হলে চলে।
👉 User input বা external data এ react করার জন্য দারুণ।

🧼 Cleanup is Important!
Timer, subscription ইত্যাদি setup করলে ভুলে যাবেন না—return করে cleanup function দিতে হবে, না হলে memory leak হতে পারে।

🌱 শেষ কথা
useEffect বুঝতে পারা মানে React functional component এর lifecycle বোঝা।
এটা UI আর বাস্তব world এর behavior এর মাঝে সেতুবন্ধন তৈরি করে।

💬 আপনি useEffect কখন এবং কিভাবে ব্যবহার করেছেন? নিচে জানাতে পারেন!