React Bangla বইয়ের জন্য নিচের মতো একটি অধ্যায় তৈরি করা যায় যেখানে একটি বাস্তব অ্যাপ ফিচার দিয়ে ব্যাখ্যা করা হয়েছে—"একজন ইউজার অনলাইনে আছে কিনা সেটা চেক করে সার্ভারে পাঠানো"।

🌐 একটি রিয়েল অ্যাপ ফিচার: ইউজার অনলাইনে আছে কিনা তা চেক করে সার্ভারে পাঠানো

📌 সমস্যাটি কী?

আমরা অনেক সময় চাই, একজন ইউজার যদি অনলাইনে থাকেন তাহলে সেটা দেখানো হোক অথবা সেই তথ্য সার্ভারে পাঠানো হোক। ধরুন আপনি একটি চ্যাট অ্যাপ বানাচ্ছেন, আপনি চান যদি কেউ অনলাইনে থাকে তাহলে সেই স্ট্যাটাস দেখানো হোক বা সার্ভারে সেই তথ্য পাঠানো হোক।

কিন্তু সমস্যা হচ্ছে, ব্রাউজারের navigator.onLine API React এর state নয়—মানে এই তথ্য যখন পরিবর্তন হয় তখন React সেটা নিজে থেকে বুঝে না। তাই আমাদেরকে এটা React এর সাথে ম্যানুয়ালি সাবস্ক্রাইব করতে হয়।

❌ সমাধানের ভুল উপায়: useEffect দিয়ে ম্যানুয়ালি সাবস্ক্রিপশন

প্রথমে আমরা যদি নিচের মতো করে করি:

function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(true);
 
  useEffect(() => {
    function updateState() {
      setIsOnline(navigator.onLine);
    }
 
    updateState();
 
    window.addEventListener("online", updateState);
    window.addEventListener("offline", updateState);
 
    return () => {
      window.removeEventListener("online", updateState);
      window.removeEventListener("offline", updateState);
    };
  }, []);
 
  return isOnline;
}

এখানে আমরা navigator.onLine এর পরিবর্তনগুলো ম্যানুয়ালি শুনছি (subscribe করছি)। React এর useEffect হুক দিয়ে আমরা event listener যোগ করেছি।

⚠️ সমস্যা:

• কোডটি একটু জটিল।
• অন্য component-এ বারবার লিখতে হতে পারে।
• সাবস্ক্রিপশন ভুলে গেলে বাগ হতে পারে।

✅ ভালো সমাধান: useSyncExternalStore দিয়ে সাবস্ক্রিপশন

React এখন useSyncExternalStore() নামের একটি নতুন হুক দিয়েছে—এই হুক দিয়ে বাইরের data source এর সাথে নিরাপদভাবে সাবস্ক্রাইব করা যায়।

function subscribe(callback) {
  window.addEventListener("online", callback);
  window.addEventListener("offline", callback);
 
  return () => {
    window.removeEventListener("online", callback);
    window.removeEventListener("offline", callback);
  };
}
 
function useOnlineStatus() {
  return useSyncExternalStore(
    subscribe,
    () => navigator.onLine,
    () => true
  );
}

ব্যাখ্যা:

• subscribe: React কে বলে দেয় কখন status আপডেট হবে।
• navigator.onLine: ক্লায়েন্টে কীভাবে বর্তমান স্ট্যাটাস পড়বে।
• () => true: সার্ভার সাইড রেন্ডারিং (SSR)-এর সময় ডিফল্ট স্ট্যাটাস।

🔧 ফিচার অ্যাপ: ইউজার অনলাইন কিনা চেক করে সার্ভারে পাঠানো

এখন আমরা এই useOnlineStatus হুক ব্যবহার করে একটি বাস্তব ফিচার বানাই—যদি ইউজার অনলাইনে থাকে তাহলে সার্ভারে একটি রিকোয়েস্ট পাঠাবে:

import { useEffect } from "react";
 
function ChatIndicator() {
  const isOnline = useOnlineStatus();
 
  useEffect(() => {
    if (isOnline) {
      // ✅ অনলাইন হলে সার্ভারে স্ট্যাটাস পাঠাও
      fetch("https://your-server.com/api/status", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ status: "online" }),
      });
    }
  }, [isOnline]);
 
  return <div>{isOnline ? "🟢 অনলাইনে আছেন" : "🔴 অফলাইনে আছেন"}</div>;
}

🔁 সারাংশ (Summary)

🎯 রিয়েল লাইফ অ্যাপ বানাতে কেন এটা দরকার?

• আপনি যদি চ্যাট সিস্টেম বানান।
• ইউজার অনলাইনে থাকলে অন্যদের সেটা দেখাতে চান।
• ব্যাকএন্ড সার্ভারে ইউজারের স্ট্যাটাস রিয়েল-টাইমে রাখতে চান।

🧠 এক কথায় মনে রাখুন

React এর বাইরের কোনো Data (যেমন: navigator.onLine) সাবস্ক্রাইব করতে চাইলে useSyncExternalStore() ব্যবহার করুন।

এই টপিকটি React Bangla বইয়ে আপনি 👉 "বাইরের ডেটা হুক দিয়ে সাবস্ক্রাইব করা" অথবা 👉 "রিয়েল টাইম অনলাইন স্ট্যাটাস ফিচার" নামে যুক্ত করতে পারেন।

আরও চ্যাপ্টার চাইলে বা এই ফিচার অ্যাপের কোড GitHub/Live লিঙ্কসহ চাইলে জানাবেন।

ধন্যবাদ প্রশ্নের জন্য Md. Mojnu Miah ভাই। আপনার প্রশ্নটি খুব গুরুত্বপূর্ণ এবং React শিখতে হলে এই তিনটি প্যারামিটার ভালোভাবে বোঝা জরুরি। চলুন একদম সহজ বাংলায় ব্যাখ্যা করি useSyncExternalStore() এর তিনটি প্যারামিটার:

✅ useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)

function useOnlineStatus() {
  return useSyncExternalStore(
    subscribe, // 1️⃣ সাবস্ক্রিপশন ফাংশন
    () => navigator.onLine, // 2️⃣ ক্লায়েন্ট থেকে ডেটা পড়ার নিয়ম
    () => true // 3️⃣ সার্ভার থেকে ডেটা পড়ার নিয়ম
  );
}

🔍 1️⃣ subscribe:

👉 কাজ: React কে বলে দেয় "এই ইভেন্টগুলো শুনতে হবে (subscribe করতে হবে)"। আপনার কোডে: যখন online বা offline ইভেন্ট হয়, তখন React আপডেট করে।

function subscribe(callback) {
  window.addEventListener("online", callback);
  window.addEventListener("offline", callback);
  return () => {
    window.removeEventListener("online", callback);
    window.removeEventListener("offline", callback);
  };
}

🔍 2️⃣ getSnapshot (👉 () => navigator.onLine)

👉 কাজ: ব্রাউজারে (client-side) এই ফাংশনটি চালিয়ে রিয়েল টাইমে ডেটা পড়ে।

📌 আপনার কোডে navigator.onLine রিটার্ন করছে—মানে ইউজার এখন অনলাইনে কিনা।

🔁 যখনই ইভেন্ট হয় (online/offline), তখন React এই ফাংশনটি চালিয়ে চেক করে নতুন value।

🔍 3️⃣ getServerSnapshot (👉 () => true)

👉 কাজ: যখন React সার্ভার থেকে রেন্ডার হয় (SSR - Server-Side Rendering), তখন এই ফাংশন চালায়।

📌 কারণ সার্ভারে navigator.onLine বলে কিছু থাকে না—it’s a browser-only API.

✅ আপনি এখানে () => true দিয়েছেন মানে: “ডিফল্টভাবে ধরে নিচ্ছি ইউজার অনলাইনে”।

📝 চাইলে আপনি false ও দিতে পারেন—যদি ধরে নিতে চান ইউজার অফলাইনে।

🧠 মনে রাখার ট্রিক

📌 সংক্ষেপে

useSyncExternalStore(
  subscribe, // ইভেন্ট সাবস্ক্রাইব + রিমুভ
  () => navigator.onLine, // ক্লায়েন্ট থেকে রিয়েল টাইম ডেটা
  () => true // সার্ভার থেকে ডিফল্ট ডেটা (SSR)
);

আপনি চাইলে আমি এর জন্য এক্টা চিত্র (diagram) বানিয়ে দিতেও পারি অথবা একটি ছোট অ্যাপ তৈরি করে GitHub/CodeSandbox লিংক দিতে পারি।

বলুন, কীভাবে সাহায্য করতে পারি 😊

অসাধারণ ভাই, এই প্রশ্নটা React শেখার একটা মোড় ঘুরিয়ে দিতে পারে! ❤️

চলুন খুব সহজভাবে বুঝি —

🔥 SSR মানে কী?

👉 SSR এর পুরো মানে: Server-Side Rendering

React এর কম্পোনেন্ট যখন সার্ভারে রান করে HTML তৈরি করে পাঠায় ব্রাউজারে, একেই বলে SSR।

✅ সহজ উদাহরণ দিয়ে বুঝি:

ধরুন আপনি একটা React কম্পোনেন্ট বানিয়েছেন:

function Profile() {
  return <h1>Md. Mojnu Miah</h1>;
}

🟢 Client-Side Rendering (CSR) হলে:

• React কোডটা ব্রাউজারে গিয়ে রান হবে
• তারপর <h1>Md. Mojnu Miah</h1> দেখাবে
• প্রথমে শুধু একটা div#root পাঠায়

🔵 Server-Side Rendering (SSR) হলে:

• সার্ভারেই React কোড রান হয়
• এবং সার্ভার ব্রাউজারে সরাসরি রেডি HTML পাঠায়:

<h1>Md. Mojnu Miah</h1>

➡️ ব্রাউজারে আসার পর React সেই HTML-এর উপর hydrate হয় (React নিজের নিয়ন্ত্রণ নেয়)।

📦 কেন SSR দরকার?

🧠 মনে রাখার ট্রিক:

⚠️ যখন SSR হয়, তখন browser API (যেমন navigator.onLine, window, ইত্যাদি) কাজ করে না।

এই কারণে useSyncExternalStore()-এর তৃতীয় প্যারামিটার দরকার পড়ে:

() => true; // SSR fallback value

✅ SSR এর জন্য জনপ্রিয় টুল:

• Next.js 👉 React দিয়ে SSR করা যায় খুব সহজে

🧪 Bonus Analogy:

আপনি দোকান থেকে একটি মোড়া রেডি পোশাক কিনলেন (SSR) আর অন্যদিকে আপনি কাপড় নিয়ে টেইলরের কাছে গেলেন, সে তখন বানিয়ে দিল (CSR)

আপনি চাইলে Next.js দিয়ে একটা ছোট SSR প্রজেক্টও দেখাতে পারি।

চাইলে বলুন — আমি বানিয়ে CodeSandbox লিংক দিয়ে দিই 😊