როგორ შევცვალოთ სწორად React-ის კომპონენტების მდგომარეობა?

React-এ অৱস্থা পৰিৱৰ্তন setState পদ্ধতিৰ জৰিয়তে ক্লাছ কম্পোনেণ্টৰ বাবে বা useState হুকৰ মাধ্যমে কাৰ্যকৰী কম্পোনেণ্টৰ বাবে হয়।

ক্লাছ কম্পোনেণ্টসমূহ:

// React আমদানি কৰা
import React, { Component } from 'react';

// ক্লাছ কম্পোনেণ্ট সৃষ্টি কৰা
class MyComponent extends Component {
  // অৱস্থা আৰম্ভ কৰা
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  // অৱস্থা পৰিৱৰ্তনৰ পদ্ধতি
  incrementCount = () => {
    // `setState` ব্যৱহাৰ
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>কাউণ্টাৰ: {this.state.count}</p>
        <button onClick={this.incrementCount}>বৃদ্ধি কৰক</button>
      </div>
    );
  }
}

// কম্পোনেণ্ট এক্সপোর্ট কৰা
export default MyComponent;

• setState এচিন্ৰোন।
• setState নতুন অৱস্থাক বৰ্তমানৰ সৈতে সংযুক্ত কৰে (shallow merge)।
• setState ফাংচন গ্ৰহণ কৰিব পাৰে, যি আগৰ ওপৰত আধাৰিত নতুন অৱস্থা উভতাই:

// ফাংচন ব্যৱহাৰ কৰি অৱস্থা পৰিৱৰ্তন
incrementCountFunction = () => {
  this.setState((prevState) => ({
    count: prevState.count + 1
  }));
};

কাৰ্যকৰী কম্পোনেণ্টসমূহ (useState-ৰ ব্যৱহাৰে):

// React আৰু useState আমদানি কৰা
import React, { useState } from 'react';

// কাৰ্যকৰী কম্পোনেণ্ট সৃষ্টি কৰা
function MyFunctionComponent() {
  // `useState` ব্যৱহাৰ কৰি অৱস্থা আৰম্ভ কৰা
  const [count, setCount] = useState(0); // [বৰ্তমান অৱস্থা, আপডেট কৰাৰ ফাংচন]

  // অৱস্থা পৰিৱৰ্তনৰ ফাংচন
  const incrementCount = () => {
    // আপডেট ফাংচন ব্যৱহাৰ
    setCount(count + 1);
  };

  return (
    <div>
      <p>কাউণ্টাৰ: {count}</p>
      <button onClick={incrementCount}>বৃদ্ধি কৰক</button>
    </div>
  );
}

// কম্পোনেণ্ট এক্সপোর্ট কৰা
export default MyFunctionComponent;

• useState এ দুটা উপাদানৰ এৰে়ৰূপে উভতাই: বৰ্তমান অৱস্থা আৰু ইয়াক আপডেট কৰাৰ ফাংচন।
• useState-ৰ পৰা উভতোৱা আপডেট ফাংচন বৰ্তমান অৱস্থা বদলাব, একত্রীকৰণ নকৰে।
• আপডেট ফাংচনলৈ ফাংচন প্ৰদান কৰিব পাৰি, যদি নতুন অৱস্থা আগৰ ওপৰত নিৰ্ভৰ কৰে:

// আগৰ ওপৰত নিৰ্ভৰশীল অৱস্থা পৰিৱৰ্তন ফাংচন
const incrementCountFunction = () => {
  setCount(prevCount => prevCount + 1);
};

অৱস্থা পৰিৱৰ্তনৰ সময়ত গুৰুত্বপূর্ণ বিষয়সমূহ:

• অৱস্থা সোজাসুজি পৰিবৰ্তন নকৰিব: কেতিয়াও state গুণৰ নতুন মান সোজাসুজি নিযুক্তি নিদিব (উদাহৰণস্বৰূপ, this.state.count = 5 বা count = 5)। React এই পৰিবৰ্তন লক্ষ্য নকৰে আৰু কম্পোনেণ্ট পুনৰ ৰেণ্ডাৰ নহ'ব।
• অবজেক্ট আৰু এৰে়ৰ পৰিবৰ্তন: অৱজেক্ট বা এৰে়ত পৰিবৰ্তন কৰিলে, সদায় নতুন কপি সৃষ্টি কৰক। React ৰেফাৰেঞ্চসমূহ তুলনা কৰে, আৰু যদি ৰেফাৰেঞ্চ পৰিবৰ্তন নহয়, React ধৰে যে ডাটা পৰিবৰ্তন হোৱা নাই আৰু পুনৰ ৰেণ্ডাৰ নকৰে।

// ক্লাছ কম্পোনেণ্টত অবজেক্ট পৰিবৰ্তন
this.setState(prevState => ({
  user: {
    ...prevState.user, // পুৰণি গুণসমূহ কপি
    name: 'নতুন নাম' // প্ৰয়োজনীয় গুণ আপডেট
  }
}));

// কাৰ্যকৰী কম্পোনেণ্টত এৰে় পৰিবৰ্তন
setItems(prevItems => [...prevItems, 'নতুন উপাদান']); // নতুন উপাদান যোগ কৰা

• setState-ৰ এচিন্ৰোনাসনতা: যদি আপুনি কামনা কৰে যে অৱস্থা আপডেট হোৱাৰ পাছত আৰু কম্পোনেণ্ট পুনৰ ৰেণ্ডাৰ হোৱাৰ পাছত কাৰ্য্য সম্পন্ন হ'ব, setState-ৰ দ্বিতীয় আৰ্গুমেণ্ট (callback) বা useEffect hook ব্যৱহাৰ কৰক।

// `setState`-ত callback
this.setState({ count: this.state.count + 1 }, () => {
  console.log('অৱস্থা আপডেট হৈছে!');
});

// `useEffect`-ৰ মাধ্যমে অৱস্থা পৰিবৰ্তনক প্ৰতিক্ৰিয়া কৰা
useEffect(() => {
  console.log('Count পৰিবৰ্তিত:', count);
}, [count]); // নিৰ্ভৰশীলতা: `count`-ৰ পৰিবৰ্তনত hook চলিব

পদ্ধতিসমূহৰ তুলনা:

বৈশিষ্ট্য	ক্লাছ কম্পোনেণ্ট (setState)	কাৰ্যকৰী কম্পোনেণ্ট (useState)
সিনট্যাক্স	this.setState(newState[, callback])	const [state, setState] = useState(initialState) hook
একত্রীকৰণ/অপডেট	নতুন অৱস্থাক চলমানৰ সৈতে একত্রীকৰণ (shallow merge)	নতুন অৱস্থা পূৰ্ণৰূপে প্ৰতিস্থাপন কৰে
এচিন্ৰোনাসন	এচিন্ৰোন	ফাংশন আপডেট এচিন্ৰোন, React ৰেণ্ডাৰ ফেজত থাকিলে, সিঁচ্ৰোন
আগৰ অৱস্থাৰ ওপৰত নিৰ্ভৰশীলতা	setState-ত ফাংশন প্ৰদান: this.setState(prevState => ({...}))	আপডেট ফাংশনলৈ ফাংশন প্ৰদান: setState(prev => ({...}))