පාඩම 4: React State හඳුන්වා දීම

React app එකක දත්ත ගබඩා කිරීමට සහ වෙනස් කිරීමට භාවිතා කරන මූලිකම සංකල්පය වන State ගැන ඉගෙන ගනිමු.

---

State යනු කුමක්ද?

State යනු React component එකකට අදාළ දත්ත (data) තබාගන්නා JavaScript object එකකි. Component එකක State එක වෙනස් වූ විට, React ස්වයංක්‍රීයව එම component එක නැවත render කර (re-render), UI එක යාවත්කාලීන කරයි. අපගේ Counter App එකේදී, counter එකේ වත්මන් අගය (0, 1, 2, ...) යනු එහි State එකයි.

State අවශ්‍ය වන්නේ ඇයි? (Why is State Necessary?)

සාමාන්‍ය JavaScript variable එකක් (`let count = 0;`) භාවිතා කර මෙය කළ නොහැක්කේ ඇයි? ඊට හේතුව, React UI එක යාවත්කාලීන කරන්නේ component එකක් re-render වූ විට පමණි. සාමාන්‍ය JavaScript variable එකක අගය වෙනස් වූ විට, React එය හඳුනා නොගන්නා අතර, component එක re-render නොකරයි. එනිසා UI එකේ පෙන්වන අගය වෙනස් නොවේ.

නමුත්, `useState` මගින් සාදන state variable එකක්, setter function එක (උදා: `setCount`) මගින් වෙනස් කළ විට, React එම වෙනස හඳුනාගෙන, අදාළ component එක re-render කර, UI එකේ පෙන්වන අගය යාවත්කාලීන කරයි. මෙය React හි මූලිකම ක්‍රියාකාරීත්වයයි.

useState Hook

Functional components වලට state එකතු කිරීම සඳහා React මගින් අපට Hooks නම් විශේෂ functions ලබා දේ. State එකක් නිර්මාණය කිරීමට අප භාවිතා කරන්නේ useState නම් Hook එකයි.

`useState` භාවිතා කරන ආකාරය

පළමුව, අප එය React වෙතින් `import` කරගත යුතුය. ඉන්පසු, `useState` function එක call කිරීමෙන් අපට state variable එකක් සහ එය යාවත්කාලීන කරන function එකක් ලැබේ.

import { useState } from 'react';

function MyComponent() {
  // Array Destructuring Syntax
  const [count, setCount] = useState(0);
  // ...
}

• import { useState } from 'react';: React වෙතින් `useState` Hook එක ලබාගැනීම.
• const [count, setCount]: මෙය JavaScript වල "Array Destructuring" නම් ක්‍රමයයි. `useState(0)` මගින් items දෙකක් සහිත array එකක් return කරයි: `[0, function]` . මෙහිදී, පළමු item එක (වත්මන් state අගය) `count` නම් variable එකටත්, දෙවන item එක (state update කරන function එක) `setCount` නම් variable එකටත් ලබා දෙයි.
• useState(0): State එකේ ආරම්භක අගය `0` ලෙස ලබා දීම.

---

Counter App එකට State එකතු කිරීම

දැන්, අපගේ `src/App.jsx` ගොනුවට `useState` Hook එක භාවිතා කර counter එකේ අගය සඳහා state එකක් නිර්මාණය කරමු. ඉන්පසු, JSX එක තුල hard-code කර තිබූ `0` වෙනුවට, අප සෑදූ `count` state variable එක යොදමු.

// src/App.jsx

import { useState } from 'react'; // 1. useState import කරන්න

function App() {
  // 2. count නමින් state variable එකක් සාදන්න
  const [count, setCount] = useState(0);

  return (
    <div className="container mt-5">
      <div className="row justify-content-center">
        <div className="col-md-6">
          <div className="card text-center">
            <div className="card-header">
              React Counter App
            </div>
            <div className="card-body">
              {/* 3. Hard-coded 0 වෙනුවට state variable එක යොදන්න */}
              <h1 className="display-1">{count}</h1> 
            </div>
            <div className="card-footer">
              <button className="btn btn-success me-2">Plus (+)</button>
              <button className="btn btn-warning me-2">Reset</button>
              <button className="btn btn-danger">Minus (-)</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default App

JavaScript variables, JSX තුල පෙන්වීමට curly braces {...} භාවිතා කරන බව සලකන්න.

ප්‍රතිඵලය (Result)

මෙම වෙනස save කළ විට, ඔබගේ browser එකේ පෙනුමේ කිසිදු වෙනසක් සිදු නොවේ. නමුත් දැන්, counter එකේ අගය පෙන්වන්නේ hard-code කළ අගයක් ලෙස නොව, React state එක මගිනි. ඊළඟ පාඩමේදී, බොත්තම් click කළ විට මෙම state එක වෙනස් කරන ආකාරය ඉගෙන ගනිමු.

⬅️ මුල් පිටුවට