FRONTEND ENGINEERING

Advanced React State & Hooks

Definition: Hooks are functions that let you "hook into" React state and lifecycle features from function components without writing classes.

একটি বেসিক কাউন্টার (Counter) অ্যাপ হয়তো সবাই বানাতে পারে। কিন্তু যখন একটি বিশাল স্কেলের অ্যাপ্লিকেশনে ডেটা ফ্লো ম্যানেজ করতে হয়, তখন প্রোপ-ড্রিলিং (Prop-drilling) ঠেকানো এবং আননেসেসারি রি-রেন্ডার (Re-render) বন্ধ করা একজন প্রো-ডেভেলপারের প্রধান কাজ হয়ে দাঁড়ায়।

1. Core Hooks Architecture

মডার্ন রিঅ্যাক্ট পুরোপুরি ফাংশনাল কম্পোনেন্টের ওপর নির্ভরশীল। ক্লাস (Class) ব্যবহার না করে আমরা কীভাবে ডেটা মেমোরিতে রাখি এবং কম্পোনেন্ট লাইফসাইকেল কন্ট্রোল করি, চলুন তার কোর আর্কিটেকচার দেখে নিই:

useState & useReducer

useState ব্যবহার করা হয় লোকাল ডেটা সেভ রাখতে। তবে আপনার ডেটা স্ট্রাকচার যদি অনেক জটিল হয় (যেমন: শপিং কার্ট), তখন মাল্টিপল স্টেট চেইন রি-রেন্ডার এড়াতে useReducer (Redux-pattern) ব্যবহার করা বেস্ট প্র্যাকটিস।

useEffect

এক্সটার্নাল সিস্টেমের (যেমন: API ফেচিং, WebSockets, বা DOM ম্যানিপুলেশন) সাথে রিঅ্যাক্টকে সিঙ্ক (Sync) করতে এটি ব্যবহৃত হয়। এর ডিপেন্ডেন্সি অ্যারেই [ ] ঠিক করে দেয় ইফেক্টটি কখন ফায়ার হবে।

useContext

"Prop Drilling" সমস্যার সবচেয়ে বড় সমাধান। ইউজার সেশন (Auth) বা ডার্ক থিমের মতো গ্লোবাল ডেটাগুলো প্রতিটি চাইল্ড কম্পোনেন্টে পাস না করে, সরাসরি যেকোনো জায়গা থেকে এক্সেস করতে এটি ব্যবহৃত হয়।

useMemo & useCallback

পারফরম্যান্স অপ্টিমাইজেশনের প্রধান হাতিয়ার। useMemo কোনো জটিল হিসাবের (Calculation) রেজাল্ট ক্যাশ করে রাখে, আর useCallback পুরো একটি ফাংশনকে ক্যাশ করে যাতে খামোখা চাইল্ড কম্পোনেন্ট রি-রেন্ডার না হয়।

2. Building Custom Hooks

The Search Bar Problem

ধরি, আপনার সাইটে একটি সার্চ বার আছে। ইউজার টাইপ করছে "M-a-c-b-o-o-k"। যদি প্রতি কি-স্ট্রোকের (Keystroke) জন্য আপনি ব্যাকএন্ডে API কল পাঠান, তবে ৭টি অক্ষরের জন্য ৭টি রিকোয়েস্ট যাবে! এতে সার্ভার ওভারলোড হয়ে যাবে।

সলিউশন: আমরা একটি কাস্টম useDebounce হুক বানাবো। এটি ইউজারের টাইপ করা শেষ হওয়া পর্যন্ত (যেমন ৫০০ মিলি-সেকেন্ড) অপেক্ষা করবে, এবং তারপর শুধুমাত্র একবারই API কল করবে।

hooks/useDebounce.js 
import { useState, useEffect } from 'react';

export function useDebounce(value, delay) {
    const [debouncedValue, setDebouncedValue] = useState(value);

    useEffect(() => {
        // Set a timer to update the value
        const handler = setTimeout(() => {
            setDebouncedValue(value);
        }, delay);

        // Cleanup function runs if user types again before delay finishes
        return () => {
            clearTimeout(handler);
        };
    }, [value, delay]);

    return debouncedValue;
}

3. State Mutation Visualizer

রিঅ্যাক্ট কীভাবে কাজ করে তা বাস্তবে দেখার জন্য নিচের ডেমোটি ট্রাই করুন। বাম দিকের UI-তে আপনি যে অ্যাকশনই নিবেন, ডানদিকের রিয়েল-টাইম JSON অবজেক্টটি (যাকে আমরা State বলি) ঠিক সেভাবেই আপডেট হবে। রিঅ্যাক্ট এই পরিবর্তন ট্র্যাক করেই ব্রাউজারের Virtual DOM আপডেট করে!

E-Commerce Cart Actions

// React State Object { "cart": [], "totalAmount": 0, "discountApplied": false }