কিভাবে একটি প্রতিক্রিয়া উপাদান আপডেট জোরপূর্বক

ভূমিকা

এই নিবন্ধে আমরা আপনাকে দেখাব কিভাবে React.js-এ একটি কম্পোনেন্ট জোর করে আপডেট করা যায়। আরও নির্দিষ্টভাবে, আমরা রিঅ্যাক্ট রি-রেন্ডারের একটি সংক্ষিপ্ত ভূমিকা দেব, আমরা দেখাব কীভাবে ক্লাস-ভিত্তিক উপাদানগুলিতে আপডেটগুলি জোর করতে হয় এবং কীভাবে কার্যকরী উপাদানগুলিতে আপডেটগুলি জোর করতে হয়।

রিঅ্যাক্ট রি-রেন্ডার

রিঅ্যাক্ট নিজেই বেশিরভাগ ক্ষেত্রে আপনার জন্য রি-রেন্ডারিং উপাদানগুলিকে স্বয়ংক্রিয়ভাবে পরিচালনা করে। যখন প্রপস বা স্টেট আপডেট করা হয়েছে তার উপর ভিত্তি করে এর কারণ হতে পারে। সুতরাং যখন একটি রাষ্ট্র বা সম্পত্তি পরিবর্তিত হয়, উপাদান পুনরায় রেন্ডার হয়। কিন্তু যদি আপনার উপাদান অন্য কিছুর উপর নির্ভরশীল হয় এবং অগত্যা আপনার রাষ্ট্র বা সম্পত্তির উপর নির্ভর করে না? সেক্ষেত্রে আপনাকে বাধ্যতামূলকভাবে কম্পোনেন্ট আপডেট করতে হতে পারে কারণ React পরিবর্তনটি সনাক্ত করতে পারেনি।

আসুন একটি প্রতিক্রিয়া উপাদানে এই বাধ্যতামূলক আপডেটটি কীভাবে ব্যবহার করবেন তা একবার দেখে নেওয়া যাক। এটি দেখানোর জন্য, আমরা ডেমো উদ্দেশ্যে একটি সাধারণ অ্যাপ্লিকেশন তৈরি করতে যাচ্ছি।

বিঃদ্রঃ: আমরা প্রতিক্রিয়ার কয়েকটি ধারণা কভার করব, তাই প্রতিক্রিয়া সম্পর্কে প্রাথমিক জ্ঞান থাকা বাঞ্ছনীয়।

ক্লাস-ভিত্তিক উপাদানগুলিতে জোরপূর্বক আপডেটগুলি

ক্লাস কম্পোনেন্টে একটি কম্পোনেন্ট রি-রেন্ড করার জন্য একটি অন্তর্নির্মিত পদ্ধতি আছে, যাকে বলা হয় forceUpdate(), যা একটি উপাদানকে পুনরায় রেন্ডার করতে বাধ্য করতে ব্যবহৃত হয়। আপনি সম্পর্কে আরো পড়তে পারেন forceUpdate() প্রতিক্রিয়া এর উপর পদ্ধতি অফিসিয়াল ওয়েবসাইট.

handleForceupdateMethod() {
    
    this.forceUpdate();
}

বিঃদ্রঃ: এটি ব্যবহার করে উপাদান আপডেট করার উপর নির্ভর করা যুক্তিযুক্ত নয় forceUpdate() পদ্ধতি যখন আপনি নিজেকে এই পদ্ধতির প্রয়োজন খুঁজে পান, তখন আপনাকে প্রথমে আপনার কোড বিশ্লেষণ করার চেষ্টা করতে হবে এবং প্রতিক্রিয়া কম্পোনেন্ট আপডেট না করার অন্য কারণ আছে কিনা তা খুঁজে বের করতে হবে। আপনি দেখতে পারেন যে একটি বাগ এটি ঘটাচ্ছে বা আপনি আপনার কোডকে এমনভাবে পুনর্গঠন করতে পারেন যা প্রতিক্রিয়াটিকে সঠিকভাবে তার নিজের উপাদানটিকে পুনরায় রেন্ডার করতে দেয়৷

এখানে একটি ক্লাস-ভিত্তিক উপাদানের উপর একটি আপডেট জোরপূর্বক কিভাবে একটি উদাহরণ আছে:

import React from 'react'

class App extends React.Component {
    constructor() {
        super();
        this.handleForceupdateMethod = this.handleForceupdateMethod.bind(this);
    };

    handleForceupdateMethod() {
        this.forceUpdate();
    };

    render() {
        return (
            <div>
                <h1>Hello StackAbuse</h1>
                <h3>Random Number: { Math.random() }</h3>
                <button onClick={this.handleForceupdateMethod}>
                    Force re-render
                </button>
            </div>
        );
    }
}

export default App

মনে হতে পারে এই পদ্ধতির মধ্যে আরও অনেক কিছু চলছে। উদাহরণস্বরূপ, কল করা forceUpdate() শিশু উপাদানগুলির জন্যও জীবনচক্র পদ্ধতিগুলিকে ট্রিগার করে। এবং আমরা প্রতিক্রিয়া দিয়ে জানি, এটি DOM আপডেট করবে শুধুমাত্র যদি মার্কআপটি আসলে পরিবর্তিত হয়।

আপনি অ্যাক্সেস করতে পারেন এখানে লাইভ কোড.

কার্যকরী উপাদানের উপর জোরপূর্বক আপডেট

ফাংশনাল কম্পোনেন্টের কোন কম্পোনেন্ট রি-রেন্ডিং করার জন্য কোন বিল্ট-ইন পদ্ধতি নেই যেমন তাদের ক্লাস-ভিত্তিক পার্টনাররা করে। এর মানে হল যে আমরা নেই forceUpdate() পদ্ধতি আমাদের কাছে উপলব্ধ। যাইহোক, মনে রাখবেন যে প্রতিক্রিয়া উপাদানগুলিতে সাধারণত স্টেট বা প্রপ পরিবর্তনের কারণে পুনরায় রেন্ডার হয়। এটি ব্যবহার করে, আমরা জোর করে আপেট করার উপায়গুলি অর্জন করতে পারি।

v16.8+ এর হিসাবে, React-এ হুকস নামে একটি ধারণা রয়েছে যা স্টেট আপডেট করা, পার্শ্ব-প্রতিক্রিয়া সম্পাদন ইত্যাদির জন্য কার্যকরী উপাদানগুলিতে ব্যবহার করা যেতে পারে৷ আমরা এই হুকগুলিকে পুনরায় রেন্ডার করার জন্য একটি উপাদান পেতে আমাদের সুবিধার জন্য ব্যবহার করব৷

একটি কার্যকরী উপাদানে একটি আপডেট জোরপূর্বক করার কিছু উদাহরণ এখানে রয়েছে:

উপরের useReducer হুক

const [ignored, forceUpdate] = useReducer(x => x + 1, 0);

function handleClick() {
    forceUpdate();
}

প্রতিক্রিয়াতে একটি রিডুসার সাধারণত ব্যবহার করা হয় যখন আপনার জটিল রাষ্ট্রীয় যুক্তি এবং ক্রিয়া থাকে। এখানে আমরা একটি ডামি স্টেট ভেরিয়েবল আপডেট করে আপডেট ট্রিগার করতে এটি ব্যবহার করি, x. আপডেটটি ট্রিগার করার জন্য রাষ্ট্রকে অবশ্যই পরিবর্তন করতে হবে, যে কারণে এটি প্রতিটি কলে বৃদ্ধি পায়।

ব্যবহার useState হুক

import React, { useState } from "react";


function useForceUpdate() {
    let [value, setState] = useState(true);
    return () => setState(!value);
}

export default function App() {
    
    const handleForceupdateMethod = useForceUpdate();

    return (
        <div className="App">
            <h1>Hello StackAbuse </h1>
            <h3>Random Number: { Math.random() }</h3>

            {/*
                Clicking on the button will force to re-render like force update does
            */}
            <button onClick={handleForceupdateMethod}>Force re-render</button>
        </div>
    );
}

এই ধরণের ফোর্স আপডেটের পিছনে ধারণাটি খুব মিল useReducer যে আমরা পরিবর্তন জোর করে ক্রমাগত রাষ্ট্র আপডেট করা হয়. একটি কাউন্টার বৃদ্ধি করার পরিবর্তে, যেমন আমরা শেষ পদ্ধতিতে করেছি, এখানে আমরা কেবল একটি বুলিয়ান মান টগল করি যাতে প্রতিটি কলে এটিকে বাতিল করা হয়।

উপরের useState এবং useCallback আঙ্গুলসমূহ

import React, { useState , useCallback} from "react";

export default function App() {
    const [, updateState] = useState();
    const handleForceupdateMethod = useCallback(() => updateState({}), []);

    
    console.log("Rendering...");

    return (
        <div className="App">
            <h1>Hello StackAbuse</h1>
            <h3>Random Number: { Math.random() }</h3>

            {/*
                Clicking on the button will force to re-render like force update does
            */}
            <button onClick={handleForceupdateMethod}>Force re-render</button>
        </div>
    );
}

আবার, এই কৌশল রাষ্ট্র পরিবর্তন করে কাজ করে। এই ক্ষেত্রে, যদিও আমরা প্রযুক্তিগতভাবে পরিবর্তন করছি না মূল্য রাষ্ট্রের, আমরা হয় এটিকে একটি নতুন বস্তু পাঠানো হচ্ছে, যা প্রতিক্রিয়া দ্বারা নতুন বলে বিবেচিত হয় কারণ এটি রাষ্ট্রের উপর "গভীর" সমতা পরীক্ষা করে না।

আপনি দেখতে পাচ্ছেন, এখানে একই জিনিস অর্জন করার জন্য বেশ কয়েকটি উপায় রয়েছে। মনে রাখবেন যে এগুলি সমস্ত প্রযুক্তিগতভাবে বিরোধী প্যাটার্ন এবং সম্ভব হলে এড়িয়ে যাওয়া উচিত। কিন্তু আপনি যদি অন্তর্নিহিত সমস্যাটি সমাধান করতে না পারেন এবং একটি উপাদানকে জোরপূর্বক আপডেট করার প্রয়োজন হয়, তাহলে আমরা এখানে যে কোনো পদ্ধতি দেখিয়েছি তা কাজ করা উচিত।

উপসংহার

এই নিবন্ধে আমরা দেখেছি কীভাবে প্রতিক্রিয়া উপাদানগুলিতে আপডেটগুলি জোর করতে হয়। আমরা আরও দেখেছি যে কীভাবে এটি কার্যকরী এবং শ্রেণী-ভিত্তিক উভয় উপাদানেই অর্জন করা যায়। অগত্যা ভাল অনুশীলন না হলেও, বিশেষ ক্ষেত্রে এটি ব্যবহার করার প্রয়োজন হলে এটি কীভাবে কাজ করে তা বোঝার জন্য এটি কার্যকর।