Stateful এবং Stateless Component এর ধারণা

Stateful এবং Stateless Component এর ধারণা

Stateful এবং Stateless কম্পোনেন্টগুলি ওয়েব ডেভেলপমেন্ট, বিশেষ করে React বা Elm এর মতো ফ্রন্ট-এন্ড ফ্রেমওয়ার্কে ব্যবহৃত দুটি গুরুত্বপূর্ণ ধারণা। এই দুটি কম্পোনেন্টের মধ্যে পার্থক্য হল তাদের স্টেট (State) ব্যবস্থাপনা এবং অবস্থান।

State একটি কম্পোনেন্টের অভ্যন্তরীণ ডেটা যা ইউজারের ইন্টারঅ্যাকশনের মাধ্যমে পরিবর্তিত হতে পারে এবং সেই পরিবর্তন UI-তে প্রতিফলিত হয়।

এখানে Stateful এবং Stateless কম্পোনেন্টের মধ্যে পার্থক্য এবং তাদের ব্যবহার বিস্তারিতভাবে আলোচনা করা হলো।

১. Stateful Component

Stateful Component হল এমন একটি কম্পোনেন্ট, যার নিজস্ব state থাকে, যা কম্পোনেন্টের অভ্যন্তরীণ ডেটা বা স্টেট হিসেবে কাজ করে। এটি সেই ডেটা পরিবর্তন এবং পরিচালনা করতে সক্ষম এবং ইউজারের ইনপুট বা অন্যান্য ঘটনার ভিত্তিতে সেই ডেটার মান পরিবর্তন করতে পারে।

বৈশিষ্ট্য:

• ডেটা পরিবর্তন: Stateful কম্পোনেন্টে state থাকে, যা সময়ের সাথে পরিবর্তিত হতে পারে।
• ইউজারের ইন্টারঅ্যাকশন: ইউজারের ক্লিক, ইনপুট, বা অন্যান্য ইভেন্টের মাধ্যমে state পরিবর্তিত হতে পারে।
• স্টেট পরিচালনা: State পরিবর্তন করার জন্য সাধারণত setState বা সংশ্লিষ্ট কোনো ফাংশন ব্যবহৃত হয়।

উদাহরণ:

ধরা যাক, একটি সিম্পল Counter কম্পোনেন্ট যেটি Stateful।

module Main exposing (..)

import Html exposing (Html, div, button, text)
import Html.Events exposing (onClick)

-- Model
type alias Model =
    { count : Int }

-- Initial Model
init : Model
init =
    { count = 0 }

-- Msg
type Msg
    = Increment

-- Update function
update : Msg -> Model -> Model
update msg model =
    case msg of
        Increment ->
            { model | count = model.count + 1 }

-- View function
view : Model -> Html Msg
view model =
    div []
        [ button [ onClick Increment ] [ text "Increment" ]
        , div [] [ text (String.fromInt model.count) ]
        ]

-- Main program
main =
    Html.beginnerProgram { model = init, view = view, update = update }

এখানে:

• Model কম্পোনেন্টে count নামে একটি state আছে।
• update ফাংশন স্টেট পরিবর্তন করতে ব্যবহৃত হয় যখন ইউজার বাটনে ক্লিক করে Increment মেসেজ পাঠায়।
• কম্পোনেন্টের ইউজার ইন্টারফেস view ফাংশন দ্বারা পরিচালিত হয়, যা বর্তমান state অনুযায়ী UI আপডেট করে।

২. Stateless Component

Stateless Component হল এমন একটি কম্পোনেন্ট, যার কোন state থাকে না। এটি শুধুমাত্র props বা ইনপুট (যে ডেটা প্রোপস হিসেবে পায়) ব্যবহার করে UI রেন্ডার করে এবং কখনও নিজে থেকে ডেটা পরিবর্তন বা আপডেট করে না। Stateless Component কেবলমাত্র ডেটা গ্রহণ করে এবং সেটি প্রদর্শন করে, তবে সেটির মধ্যে কোন ডেটার পরিবর্তন বা ইন্টারঅ্যাকশন হয় না।

বৈশিষ্ট্য:

• কোনো স্টেট নেই: Stateless কম্পোনেন্টে কোনো অবস্থা (state) থাকে না।
• ডেটা প্রোপস দ্বারা প্রেরিত: এটি প্রোপসের মাধ্যমে ডেটা গ্রহণ করে এবং প্রদর্শন করে।
• ইউজারের ইন্টারঅ্যাকশন নেই: Stateless কম্পোনেন্টে ইউজারের ইনপুট বা ইন্টারঅ্যাকশন দ্বারা স্টেট পরিবর্তন হয় না।

উদাহরণ:

ধরা যাক, একটি সিম্পল Greeting কম্পোনেন্ট যা Stateless।

module Main exposing (..)

import Html exposing (Html, div, text)

-- Stateless component
view : String -> Html msg
view name =
    div [] [ text ("Hello, " ++ name) ]

-- Main program
main =
    view "Alice"

এখানে:

• view কম্পোনেন্ট name প্রোপস গ্রহণ করে এবং শুধু সেই ডেটা দিয়ে একটি বার্তা প্রদর্শন করে।
• view কম্পোনেন্টের মধ্যে কোন state নেই, এটি শুধু "Alice" নামের প্রোপস গ্রহণ করে এবং সেটি UI-তে প্রদর্শন করে।

৩. Stateful এবং Stateless কম্পোনেন্টের মধ্যে পার্থক্য

৪. Stateful এবং Stateless কম্পোনেন্টের মধ্যে সম্পর্ক

• Stateful Components সাধারণত Stateless Components ব্যবহার করে। উদাহরণস্বরূপ, একটি কম্পোনেন্ট যার স্টেট থাকে, সেই স্টেটের উপর ভিত্তি করে একটি UI তৈরি করা হয়, এবং সেই UI কে Stateless Components হিসাবে উপস্থাপন করা হয়। এটি কোডের পুনঃব্যবহারযোগ্যতা এবং সংগঠন সহজ করে।
• Stateless Components সাধারণত Stateful Components এর অংশ হয়ে কাজ করে। এগুলি UI-র প্রদর্শন এবং ডেটা ব্যবস্থাপনা না করে শুধুমাত্র ডেটা গ্রহণ করে এবং সেই ডেটা প্রদর্শন করে।

উপসংহার

Stateful এবং Stateless Components দুটি অত্যন্ত গুরুত্বপূর্ণ কনসেপ্ট, যা Elm বা React এর মতো ফ্রেমওয়ার্কে অ্যাপ্লিকেশন ডেভেলপমেন্টের মূল ভিত্তি। Stateful Components ব্যবহারকারীর ইন্টারঅ্যাকশন ও স্টেট পরিবর্তন হ্যান্ডল করে, যেখানে Stateless Components শুধুমাত্র প্রদর্শন কাজ করে। এই দুটি ধরনের কম্পোনেন্টের ব্যবহারে অ্যাপ্লিকেশনের কর্মক্ষমতা এবং পরিষ্কার কোড লেখা সম্ভব হয়।