The latest articles on DEV Community by Umme Salma (@umme_salma). https://dev.to/umme_salma https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2860855%2F1086bda4-b97d-4408-a2be-3982b4912103.jpg https://dev.to/umme_salma en Umme Salma Thu, 16 Oct 2025 16:28:26 +0000 https://dev.to/umme_salma/redux-naaki-context-api-1gj6 https://dev.to/umme_salma/redux-naaki-context-api-1gj6 <h2> প্রথমেই জেনে নেই Context API কী? </h2> <p>🔹Context API হলো React-এর একটি ফিচার (বা হুক) যা prop drilling এবং lifting up state কমাতে সাহায্য করে।<br> তবে মনে রাখতে হবে Context API কিন্তু কোনো state manager না।<br> এটি মূলত একটি dependency injection mechanism, অর্থাৎ এটি state বা data একাধিক কম্পোনেন্টে শেয়ার করার একটি উপায়।</p> <p>এটি কোনো আলাদা লাইব্রেরি বা ফ্রেমওয়ার্ক না, বরং React-এরই একটি অংশ। এর মাধ্যমে আমরা parent থেকে child-এ বারবার prop পাঠানোর ঝামেলা এড়াতে পারি।</p> <h2> এখন দেখা যাক Redux কী? </h2> <p>🔹Redux হলো একটি state container, যা অ্যাপ্লিকেশনের state ম্যানেজ করতে সাহায্য করে। এটি prop drilling এবং state lifting সমস্যা থেকেও মুক্তি দেয়। তবে Redux হলো একটি আলাদা লাইব্রেরি, যেটি আমাদের প্রোজেক্টে ইনস্টল করে ব্যবহার করতে হয়।</p> <p><strong>🔸এখন একটি প্রশ্ন আসতে পারে যেহেতু Context API এবং Redux দুটো দিয়েই prop drilling এড়ানো যায়, তাহলে শুধু Context API ব্যবহার করলেই তো হয়! তাহলে Redux কেন ব্যবহার করব?</strong><br> উত্তর: দুইটা টুলের কাজের উদ্দেশ্য কিছুটা মিললেও, ক্ষমতা ও ব্যবহারের জায়গায় অনেক পার্থক্য রয়েছে। যেমনঃ performance, scalability, এবং state management structure।</p> <p>Context API সাধারণত স্টেটকে globally শেয়ার করার কাজ করে। যখন কোনো কম্পোনেন্টে দরকার হয়, তখন সেই স্টেট সেখানে পাঠানো হয়। এটি prop drilling কমায় এবং boilerplate কোডও তুলনামূলক কম লাগে।</p> <p>অন্যদিকে, Redux কিছুটা বেশি সেটআপের প্রয়োজন হলেও এটি আমাদের আরও কিছু গুরুত্বপূর্ণ সুবিধা দেয় যা Context API দিতে পারে না। যেমন:</p> <ul> <li>Centralized state management</li> <li>Strict state mutation rules (state সরাসরি পরিবর্তন করা যায় না)</li> <li>Time-travel debugging (state পরিবর্তনের ইতিহাস দেখা যায়)</li> <li>Middleware support (async কাজের জন্য, যেমন Redux Thunk বা Saga)</li> <li>সহজ টেস্টিং</li> </ul> <p><strong>🧩সংক্ষেপে বললে:</strong><br> ছোট বা মাঝারি অ্যাপে Context API যথেষ্ট।<br> বড় বা complex অ্যাপে Redux ভালো।</p> <p><strong>🔸এখন আরও একটি প্রশ্ন মনে হতে পারে:<br> ছোট অ্যাপে কেন Redux ব্যবহার করব না? ছোট এ্যাপে রিডাক্স ব্যবহার করলেই বা সমস্যা কী?</strong><br> উত্তর: ছোট প্রজেক্টে Redux ব্যবহার করলে অতিরিক্ত boilerplate কোড লিখতে হয় এবং সেটআপ করতে সময় বেশি লাগে। যেহেতু ছোট অ্যাপে স্টেটের সংখ্যা কম থাকে, তাই Context API দিয়েই সহজে ও দ্রুতভাবে কাজ করা যায়।</p> <p>Redux ব্যবহার করলে performance কিছুটা ভালো পাওয়া যায় (বিশেষ করে useSelector ব্যবহারে), কিন্তু ছোট অ্যাপের ক্ষেত্রে সেই পার্থক্য খুবই নগণ্য।<br> তাই সময় ও কোড উভয় দিক থেকেই ছোট প্রজেক্টে Context API বেশি কার্যকর।</p> webdev programming beginners productivity Umme Salma Wed, 30 Jul 2025 16:52:46 +0000 https://dev.to/umme_salma/learn-about-useeffect-hook-in-react-3cef https://dev.to/umme_salma/learn-about-useeffect-hook-in-react-3cef <p>React-এ useEffect কেন ব্যবহার করবো?</p> <p>React কম্পোনেন্টের একটি গুরুত্বপূর্ণ বৈশিষ্ট্য হল, এটি যেকোনো পরিবর্তনের পর পুরো কোডটিকে রি-রেন্ডার করে। তবে কিছু ক্ষেত্রে এমন প্রয়োজন হয়, যেখানে আমরা চাই না পুরো কোডটি বারবার রেন্ডার হোক, বরং নির্দিষ্ট কোনো ইভেন্ট বা শর্ত অনুযায়ী রেন্ডার হোক। এখানে useEffect হুকটির প্রয়োজন হয়। যেমনঃ</p> <p>ধরুন, আমাদেরকে এসাইনমেন্ট দেওয়া হয়েছে, যেখানে ১০টি রিকোয়ারমেন্ট লেখা আছে। হঠাৎ জানতে পারলেন, ৬ নাম্বার রিকোয়ারমেন্টে কিছু আপডেট আনা হয়েছে।তাহলে নিশ্চয়ি আপনি প্রথমে পুরো ফাইলটি পড়ে দেখে নিবেন এবং কেবল ৬ নাম্বারটি আপডেট করবেন। এরপর আবার জানলেন, আরও কিছু পরিবর্তন আনা হয়েছে, কিন্তু কোনটাতে তা জানেন না, তাই আবার পুরো ফাইলটি পড়তে হবে।</p> <p>React-ও এমনটি করে, এটি যেকোনো ছোট পরিবর্তনের জন্য পুরো কোডটি রেন্ডার করে এবং যেখানে প্রয়োজন সেখানে আপডেট করে। কিন্তু আমরা যদি চাই যে কিছু কোড শুধুমাত্র একবার রেন্ডার হোক, তখন useEffect ব্যবহার করা যায়।</p> <p>যেমন, একটি বাটন আছে যা ক্লিক করলে ভ্যালু বাড়ে বা কমে। এখন যদি আমরা এটি console.log মেসেজ সরাসরি কোডে লিখি, তবে বাটনে প্রতিবার ক্লিক করলে সেই মেসেজ প্রিন্ট হবে,যতবার বাটনে ক্লিক করবো ততবার মেসেজ প্রিন্ট হবে। কারণ React পুরো কম্পোনেন্টটিই রি-রেন্ডার করছে। কিন্তু যদি আমরা console.log মেসেজটি useEffect এর মধ্যে রাখি এবং একটি ফাঁকা ডিপেনডেন্সি অ্যারে ([]) ব্যবহার করি, তাহলে এটি কেবল একবারই রেন্ডার হবে এবং বারবার প্রিন্ট হবে না।</p> <p>useEffect কিভাবে কাজ করে?</p> <p>useEffect হুকটি আমরা এমনভাবে ব্যবহার করতে পারি যেনো কোনো নির্দিষ্ট ইভেন্ট ঘটলে বা নির্দিষ্ট শর্ত পূরণ হলে এটি চালু হয়। যখন আমরা useEffect এর ডিপেনডেন্সি অ্যারে ব্যবহার করি, তখন কোডটি প্রথমবার একবারই রেন্ডার হয় এবং ডিপেনডেন্সির মান পরিবর্তিত হলে আবার রেন্ডার হয়।</p> <p>useEffect কে আমি তিন ভাবে ব্যবহার করেছি। এবং আমি google থেকে এই তিনটিকেই খুঁজে পেয়েছি। তবে আরও থাকতে পারে:</p> <ol> <li><p>ফাঁকা ডিপেনডেন্সি অ্যারে ([]) এই ক্ষেত্রে কোডটি শুধুমাত্র একবার রেন্ডার হবে।</p></li> <li><p>নির্দিষ্ট ডিপেনডেন্সি দেওয়া। এই ক্ষেত্রে ডিপেনডেন্সির যে কোনো মান পরিবর্তন হলে useEffect রি-রেন্ডার হবে। অর্থাৎ ডিপেন্ডেন্সি অনুযায়ী রেন্ডার হবে। </p></li> <li><p>কোনো ডিপেনডেন্সি ছাড়া। এই ক্ষেত্রে কম্পোনেন্টের প্রতিটি রেন্ডারে কোডটি চালু হবে। (এই ক্ষেত্রে Infinity loop তৈরি হয়।)</p></li> </ol> <p>তো সংক্ষেপে বলা যায় যে,<br> useEffect ব্যবহার করে আপনি নির্দিষ্ট কিছু অংশের জন্য এই রেন্ডারিং কন্ট্রোল করতে পারেন।</p> <p>React-এ কাজের সময় useEffect আপনাকে অনেক সুবিধা দিতে পারে, বিশেষত যখন আপনি চাচ্ছেন বারবার রেন্ডারিং এড়িয়ে চলতে।এবং রেন্ডারিংকে কন্ট্রোল করতে আপনার নিজের মনমত।</p> <ul> <li>রেন্ডারিং বলা হয় কোন কিছু শো করা বা দেখানোকে।</li> </ul> programming react webdev beginners Umme Salma Sun, 20 Jul 2025 14:23:23 +0000 https://dev.to/umme_salma/csr-vs-ssr-vs-ssg-2ni5 https://dev.to/umme_salma/csr-vs-ssr-vs-ssg-2ni5 <p><strong>রেন্ডারিং কীভাবে হয়?</strong><br> <strong>Ans:</strong> যখন কোনো একটা পেজ (page) লোড হয়, তখন সেটিকে বলা হয় রেন্ডার হওয়া। যেমন: আমরা যখন ফেসবুকে ভিজিট করি, তখন ফেসবুক আমাদের চোখে দৃশ্যমান হয়। এই দেখতে পাওয়ার ঘটনাটাই রেন্ডার হওয়া।</p> <p><strong>রেন্ডার কিভাবে হয়?</strong></p> <p><strong>Ans:</strong> রেন্ডারিংয়ের ক্ষেত্রে প্রথমে সার্ভার থেকে HTML ও CSS ফাইলগুলো ব্রাউজারে লোড হয়। এরপর আসে JS ফাইলগুলো। এই ফাইলগুলো ব্রাউজারে কাজ করে পুরো ওয়েবপেজটিকে ইন্টারঅ্যাকটিভ (Clickable, Dynamic) করে তোলে।</p> <p>রেন্ডারিং সাধারণত তিন ধরনের হয়ে থাকে:</p> <ol> <li>ক্লায়েন্ট সাইড রেন্ডারিং</li> <li>সার্ভার সাইড রেন্ডারিং</li> <li>প্রি-রেন্ডারিং</li> </ol> <p><strong>1. ক্লায়েন্ট সাইট রেন্ডারিং কি?</strong></p> <p><strong>Ans:</strong> ক্লায়েন্ট সাইট রেন্ডারিং এর ক্ষেত্রে, যখন আমরা কোনো URL এ ক্লিক করি, তখন প্রথমে একটি ব্ল্যাংক HTML, CSS ফাইল লোড হয়। তারপর JS ফাইলগুলো সার্ভার থেকে আসে। কিন্তু এখানে একটা বড় সমস্যা হচ্ছে JS ফাইলগুলো আসার আগেই SEO চলে যায় আর কোনো কন্টেন্ট খুঁজে পায় না।</p> <p>তবে ক্লায়েন্ট সাইট রেন্ডারিং এর ভালো দিক হচ্ছে, প্রথমে যদিও পেজ লোড হতে বেশি সময় লাগে, কিন্তু পরবর্তীতে আর বেশি সময় লাগে না।</p> <p><strong>2. সার্ভার সাইট রেন্ডারিং কি?</strong></p> <p><strong>Ans:</strong> সার্ভার সাইট রেন্ডারিং বলা হয় যখন HTML, CSS, JS সব ফাইল আগে থেকেই সার্ভারে তৈরি করা থাকে। যখন ক্লায়েন্ট সাইট থেকে রিকুয়েস্ট পাঠানো হয়, তখন সার্ভার সাথে সাথে সব ফাইল একসাথে দিয়ে দেয়।</p> <p>এতে করে লোডিং টাইম কম লাগে এবং এটা SEO ফ্রেন্ডলি। কিন্তু এর খারাপ দিক হচ্ছে পেজ রিলোড দিলেই সার্ভারে রিকুয়েস্ট চলে যায়। লোড বেশি হলে সার্ভার স্লো হয়ে যেতে পারে।</p> <p><strong>3. প্রি-রেন্ডারিং বা স্ট্যাটিক সাইট জেনারেশন কী?</strong></p> <p><strong>Ans:</strong>প্রি-রেন্ডারিং বা স্ট্যাটিক সাইট জেনারেশন হলো_ যখন আমরা প্রজেক্ট বিল্ড করি, তখন ফাইল জেনারেট হয়ে থাকে। যখন আমরা যে URL-এ রিকুয়েস্ট করি, সাথে সাথে সেটি সার্ভার থেকে দেখানো হয়।</p> <p>তবে এর খারাপ দিক হচ্ছে— যখন আমাদের কাছে এমন কোনো পেজ থাকে যা কিছুক্ষণ পরপর আপডেট হয়, যেমন: কোনো ব্লগ ওয়েবসাইট, যেখানে কিছুক্ষন পর পর নতুন ব্লগ পোস্ট হয়, তখন আমাদের প্রজেক্টকে আবার বিল্ড করতে হবে। নাহয় সার্ভার সাইট রেন্ডারিং করতে হবে।</p> <p><strong>=&gt;</strong> তবে এর একটি সহজ সমাধান হচ্ছে Next.js। কারণ, Next.js-এ ক্লায়েন্ট সাইট রেন্ডারিং, সার্ভার সাইট রেন্ডারিং, স্ট্যাটিক সাইট জেনারেশন সবগুলো একসাথে করা যায়।_</p>