Posts by Saad

Background: One of the most common things you might have heard when you are coming to global state management as a new developer is that "Redux is too complex", "It has too many boilerplates", etc. I would request you to check the new Redux documentation and Redux Toolkit (RTK) before you jump to any conclusions. To me personally, I love using redux as my global state management solution. Because of the followings: I already understand the Redux concept.Redux is heavily battle-tested in the industry.It has a high demand skill in the job market.RTK solves all the pain points that we…

আমরা আগের পর্বগুলোতে useState, useEffect, useRef, useReducer, useContext নিয়ে আলোচনা করেছি। আজকের পর্বে আমরা useCallback এবং React.memo নিয়ে আলোচনা করবো ইনশাল্লাহ। প্রথমেই বলে রাখা ভালো, এগুলো মূলত আমাদের React এর perfomance optimization এ কাজে লাগে। এগুলো নিয়ে আলোচনার পূর্বে আগে দেখে নেওয়া দরকার কি প্রবলেমের কারনে এগুলোর দরকার হয়। এটাকে বুঝানোর জন্যে একটি ডেমো অ্যাপ বানিয়েছি। দেখা যাক এটার মধ্যে কি আছে। initial app আমরা দেখতে পারছি আমাদের অ্যাপে একটি প্যারেন্ট কম্পোনেন্ট আছে যেখানে "Parent Increment Button" নামে একটি বাটন আমাদের প্যারেন্টেই আছে এবং সাথে ৩টি child কম্পোনেন্ট আছে, যেগুলো প্যারেন্ট কম্পোনেন্ট থেকে আলাদা ভাবে আছে। parent component এরপরে আমরা দেখি আমাদের child component গুলোতে…

পর্ব ৫ – useContext hook আমরা আগের পর্বগুলোতে useState, useEffect, useRef, useReducer নিয়ে আলোচনা করেছি। আজকের পর্বে আমরা useContext নিয়ে আলোচনা করবো ইনশাল্লাহ। useContext এর নাম থেকেই আমরা বুঝতে পারছি এই hook টি React Context এর সাথে সম্পর্কিত। আমরা এই পোস্টে context নিয়ে বিস্তারিত আলোচনায় যাব না, কিন্তু আমরা হাল্কা আলোচনা করবো useHook এর ব্যাখ্যায় যাওয়ার আগে। Context কি? React Context হচ্ছে এমন একটি মেথড যেটার মাধ্যমে আমরা খুব সহজে আমাদের parent component থেকে child component এ props পাঠাতে পারি। আমরা সবাই জানি React এর সবথেকে বেষ্ট জিনিস হচ্ছে আমরা আমাদের UI কে reusable component এ বিভক্ত করতে পারি। ছোট…

পর্ব ৪ - useReducer hook আমরা আগের পর্বগুলোতে useState, useEffect, useRef নিয়ে আলোচনা করেছি। আজকের পর্বে আমরা useReducer নিয়ে আলোচনা করবো ইনশাআল্লাহ। তাহলে শুরু করা যাক। প্রথমে আসা যাক useReducer hook কি? useReducer hook হচ্ছে আমাদের useState hookএর আরেকটি অলটারনেটিভ এবং এটি দিয়েও আমরা আমাদের ইন্টারনাল state কে আপডেট করতে পারি। useState এর মত useReducer এর মাধ্যমে state আপডেট করলেও আমাদের React Component re-render হয়ে আমাদেরকে নতুন state দেয়। আমাদের মনে এখন স্বভাবতই প্রশ্ন আসে, useReducer যদি useState এর মতই একই কাজ করে তাহলে এটার দরকার কি আমাদের? ভালো প্রশ্ন। মূলত আমাদের ইন্টারনাল ষ্টেটের উপর ডিপেন্ড করে যে আমরা কোনটা…

আগের ২ পর্বে আমরা কাভার করেছি useState এবং useEffect. এই পার্টে আমরা ইনশাল্লাহ useRef hook নিয়ে আলোচনা করবো। প্রথমে আসা যাক এটার অফিসিয়াল সংজ্ঞায়ে। useRef hook হচ্ছে একটি ফাংশন যেটা আমাদের একটি mutable (মানে যারা value modify করা যায়) রেফ (ref) অবজেক্ট রিটার্ন করে। এবং এই অবজেক্ট এর একটি প্রপার্টি হচ্ছে current যেটাতে আমরা initial ভেলু সেট করতে পারি আর্গুমেন্ট পাস করে। আর এই অবজেক্টটি আমাদের component আর পুরো লাইফ সাইকেল জুড়ে পারসিস্ট থাকে। উপড়ের অংশটি হচ্ছে আমাদের সংজ্ঞা, এটা দেখে ভড়কে যাওয়ার কিছু নেই। আমরা এখন সহজ ভাবে এটা বুঝার ট্রাই করবো। আমরা ফার্স্টে বললাম যে useRef hook আমাদের…

পর্ব ২ useEffect আগের পর্বে আমরা hooks এর ব্যাকগ্রাউন্ড এবং useState hook নিয়ে আলোচনা করেছি। এই পর্বে আমরা useEffect hook নিয়ে আলোচনা করবো ইনশাআল্লাহ্‌। React.useEffect হচ্ছে React এর একটি বিল্ট-ইন hook যেটার মাধ্যমে আমরা আমাদের যেকোনো কাস্টম কোড রান করাতে পারি React render এবং re-render এর পরে। React.useEffect(() => { // 1 -> callback function // your side-effect code here. }, [] // 2 -> dependency array) উপড়ের কোডের ভিতরে আমরা একটু খেয়াল করে দেখি যে আমি ১, ২ দিয়ে ২ টি জায়গায় লেবেলিং করেছি। আমাদেরকে React.useEffect এর কাজ বুঝতে হলে এই ১ এবং ২ পয়েন্ট ২টী ভালমতো বুঝা লাগবে।…