ReactJS List Rendering Keys Sinhala | React Tutorial SL

ආයුබෝවන් යාළුවෝ හැමෝටම! 👋 අද අපි ReactJS වල ගොඩක් වැදගත්, හැබැයි සමහර වෙලාවට beginners ලට ටිකක් අවුල් වෙන්න පුළුවන් මාතෘකාවක් ගැන කතා කරන්නයි යන්නේ: ඒ තමයි List Rendering සහ Keys කියන concepts දෙක. ඕනෑම web application එකක list එකක් display කරන්න වෙනවානේ. ඒ කියන්නේ products list එකක් වෙන්න පුළුවන්, comments list එකක් වෙන්න පුළුවන්, එහෙමත් නැත්නම් to-do list එකක් වෙන්නත් පුළුවන්. මේ වගේ දේවල් ReactJS වල හරියට කරන්නේ කොහොමද කියලා අපි අද බලමු.

මේ tutorial එක අවසානෙදි, ඔබට පුළුවන් වෙයි:

• ReactJS භාවිතයෙන් data arrays වලින් lists render කරන්න.
• key prop එකේ වැදගත්කම සහ ඒක අත්‍යවශ්‍ය ඇයි කියලා තේරුම් ගන්න.
• key prop එකට unique සහ stable අගයක් දෙන්න ඕන ඇයි කියලා දැනගන්න.
• index එක key එකක් විදිහට පාවිච්චි කිරීමෙන් ඇතිවන ගැටළු වළක්වා ගන්න.
• Real-world scenario එකක list එකක් නිවැරදිව render කරන හැටි බලන්න.

1. ReactJS වල Lists Render කරන්නේ කොහොමද? 🤔

අපි හිතමු අපිට names array එකක් තියෙනවා කියලා, ඒක අපේ web page එකේ list එකක් විදිහට display කරන්න ඕනේ කියලා. JavaScript වල Array.prototype.map() method එක මේකට තමයි පාවිච්චි කරන්නේ. මේ map() method එක array එකක හැම item එකක්ම අරගෙන, ඒ හැම item එකකටම function එකක් apply කරලා, අලුත් array එකක් හදනවා. ReactJS වලදී, මේ අලුත් array එකට React elements (e.g., <li>, <div>) පුරවන්න පුළුවන්.

උදාහරණයක් විදිහට, අපි මේ fruits array එකෙන් list එකක් හදමු:

import React from 'react';

function FruitList() {
  const fruits = ['ඇපල්', 'දොඩම්', 'කෙසෙල්', 'අඹ'];

  return (
    <div>
      <h2>අපේ පළතුරු (Our Fruits)</h2>
      <ul>
        {fruits.map(fruit => (
          <li>{fruit}</li> // මෙතන අපි key prop එක දාලා නෑ!
        ))}
      </ul>
    </div>
  );
}

export default FruitList;

මේ code එක වැඩ කරනවා. ඒත් ඔබ ඔබේ browser එකේ console එක බැලුවොත්, මෙන්න මේ වගේ warning එකක් දකින්න පුළුවන්:

Warning: Each child in a list should have a unique "key" prop.

මේ warning එක කියන්නේ මොකක්ද? අන්න එතනට තමයි key prop එකේ වැදගත්කම එන්නේ!

2. "key" Prop එකේ වැදගත්කම 🔑

ReactJS කියන්නේ UI එක optimize කරන්න හදපු library එකක්. Component එකක් re-render වෙනකොට React කරන්නේ, අලුත් virtual DOM එක කලින් virtual DOM එකත් එක්ක compare කරන එක (මේකට කියන්නේ "reconciliation" කියලා). මේ compare කරන එක හරියටම කරන්න, React ට list එකේ තියෙන හැම element එකක්ම තනි තනිව identify කරන්න ක්‍රමයක් ඕනේ.

හිතන්න පන්තියක ළමයි පිරිසක් ඉන්නවා කියලා. ළමයි ටික අසුන් මාරු කරලා වාඩි වුණාම, ගුරුවරයාට හරියටම දැනගන්න ඕනේ කවුද කවුද කියලා (ඒ කියන්නේ ළමයින්ගේ නම්/ID numbers). 그냥 ඔවුන් වාඩි වෙලා ඉන්න තැන විතරක් බැලුවොත්, සමහර වෙලාවට අවුල් වෙන්න පුළුවන්. React වල key prop එකත් හරියට ඒ ID number එක වගේ.

Key එකක් unique සහ stable වෙන්න ඕනේ ඇයි?

• Unique (අද්විතීය): List එකක තියෙන හැම item එකකටම තමන්ටම ආවේණික key එකක් තියෙන්න ඕනේ. ඒ කියන්නේ key එකක් දෙපාරක් පාවිච්චි කරන්න බෑ. React ට මේක පාවිච්චි කරන්නේ list එකේ තියෙන elements එකිනෙකාගෙන් වෙන්කර හඳුනාගන්න.
• Stable (ස්ථාවර): එක් වරක් set කල key එකක් එම element එකට re-render වන අවස්ථාවලදී වෙනස් නොවිය යුතුයි. ඒ කියන්නේ element එක delete කළොත් මිසක්, එහෙමත් නැත්නම් අලුත් element එකක් add කළොත් මිසක්, කලින් තිබුණු element එකකට දීපු key එක වෙනස් කරන්න බෑ. key එකක් වෙනස් වුණොත්, React හිතන්නේ ඒක අලුත් element එකක් කියලා, ඒක නිසා කලින් තිබුණු element එක අයින් කරලා, අලුත් එකක් හදනවා. මේක performance issue එකක් වගේම, component එකේ internal state එක අවුල් වෙන්නත් හේතුවක් වෙනවා.

index එක key එකක් විදිහට පාවිච්චි කිරීමේ ගැටළු ❌

සමහර අය, විශේෂයෙන්ම beginners ලා, map() method එකේ දෙවැනි parameter එක වන index එක key prop එක විදිහට පාවිච්චි කරනවා. ඒ කියන්නේ මෙහෙම:

import React from 'react';

function FruitListWithIndexKey() {
  const fruits = ['ඇපල්', 'දොඩම්', 'කෙසෙල්', 'අඹ'];

  return (
    <div>
      <h2>අපේ පළතුරු (Our Fruits) - Index Key එක්ක</h2>
      <ul>
        {fruits.map((fruit, index) => (
          <li key={index}>{fruit}</li> // Warning එක අයින් වෙනවා, ඒත් මේක හොඳ පුරුද්දක් නෙවෙයි
        ))}
      </ul>
    </div>
  );
}

export default FruitListWithIndexKey;

මේකෙන් console warning එක අයින් වෙනවා තමයි, ඒත් මේක හොඳ පුරුද්දක් නෙවෙයි. index එක key එකක් විදිහට පාවිච්චි කිරීමෙන් බරපතල ගැටළු ඇති වෙන්න පුළුවන්, විශේෂයෙන්ම list එකේ items add වෙනකොට, remove වෙනකොට, එහෙමත් නැත්නම් reorder වෙනකොට.

උදාහරණයක් විදිහට, අපේ fruits list එකෙන් 'දොඩම්' කියන එක remove කළොත්, අලුත් array එකේ 'කෙසෙල්' වල index එක 2 වෙනුවට 1 වෙනවා. 'අඹ' වල index එක 3 වෙනුවට 2 වෙනවා. React හිතන්නේ මේ elements අලුත් elements කියලා. ඒකෙන් performance issues වගේම, list එක ඇතුලේ state තියාගන්න inputs වගේ components වලට අදාළ state එක අවුල් වෙන්න පුළුවන්.

Best Practice: Unique සහ Stable ID එකක් පාවිච්චි කරන්න! ✅

key prop එකට හැමවිටම, data item එකට ආවේණික වූ unique සහ stable ID එකක් පාවිච්චි කරන්න උත්සාහ කරන්න. මේක සාමාන්‍යයෙන් database එකකින් එන id එකක්, එහෙමත් නැත්නම් item එකේම තියෙන අද්විතීය sku එකක් වගේ දෙයක් වෙන්න පුළුවන්.

මෙන්න User List එකක් මේ විදිහට හදාගන්න පුළුවන්:

import React from 'react';

function UserList() {
  const users = [
    { id: 101, name: 'සමන් පෙරේරා' },
    { id: 102, name: 'කමලී සිල්වා' },
    { id: 103, name: 'සුනිල් රත්නායක' },
    { id: 104, name: 'ආශා දිසානායක' }
  ];

  return (
    <div>
      <h2>අපේ පරිශීලකයින් (Our Users)</h2>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li> // මෙතන අපි user.id එක key එක විදිහට පාවිච්චි කරනවා
        ))}
      </ul>
    </div>
  );
}

export default UserList;

මෙතනදී user.id එක unique සහ stable. ඒ නිසා React ට list එකේ elements නිවැරදිව manage කරන්න පුළුවන්. List එකෙන් user කෙනෙක් remove කළොත්, එහෙමත් නැත්නම් අලුත් කෙනෙක් add කළොත්, React ට කලින් තිබුණු elements වලට කිසිම බලපෑමක් නොකර, වෙනස් වූ elements ටික විතරක් update කරන්න පුළුවන්.

Stable ID එකක් නැතිනම් කුමක්ද කරන්නේ?

සමහර වෙලාවට, ඔබට එන data වල unique සහ stable ID එකක් නැති වෙන්න පුළුවන්. මේ වගේ අවස්ථාවකදී, ඔබට uuid වගේ library එකක් පාවිච්චි කරලා client-side එකේදී unique ID එකක් generate කරගන්න පුළුවන්. හැබැයි, මේක පාවිච්චි කරන්න ඕනේ අවසාන විසඳුමක් විදිහට විතරයි. පුළුවන් හැම වෙලාවකම data source එකෙන්ම stable ID එකක් එවන විදිහට API design කරන්න උත්සාහ කරන්න.

3. Common Issues සහ Best Practices 📚

දැන් අපි key prop එකේ වැදගත්කම සහ ඒක හරියට පාවිච්චි කරන හැටි දන්නවා. තවදුරටත් common issues සහ best practices කිහිපයක් ගැන බලමු.

"Warning: Each child in a list should have a unique 'key' prop."

මේ warning එක කියන්නේ, ඔබ list එකක් render කරනවා නම්, ඒ list එකේ හැම child element එකකටම key prop එකක් දාන්න ඕනේ කියලා. මේකෙන් React ට list එකේ elements මොනවාද කියලා දැනගන්න උදව් වෙනවා. මේ warning එක නොසලකා හැරියොත්, ඔබේ application එකේ performance අඩු වෙන්න පුළුවන්, වගේම නොපෙනෙන bugs ඇති වෙන්නත් පුළුවන්.

index එක key එකක් ලෙස පාවිච්චි කිරීමෙන් ඇතිවන අසාමාන්‍ය ගැටළු

අපි කලින් කතා කළා වගේ, index එක key එකක් විදිහට පාවිච්චි කිරීමෙන් සරල අවස්ථාවලදී warning එක අයින් වුණත්, සංකීර්ණ අවස්ථාවලදී ගැටළු ඇති වෙන්න පුළුවන්. උදාහරණයක් විදිහට, අපි to-do list එකක් හිතමු. හැම to-do item එකකම checkbox එකක් තියෙනවා, ඒක complete කළාද නැද්ද කියලා පෙන්නන්න.

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([
    { id: 1, text: 'කෑම උයන්න', completed: false },
    { id: 2, text: 'ගෙදර වැඩ කරන්න', completed: false },
    { id: 3, text: 'React Tutorial එක බලන්න', completed: true },
  ]);

  const toggleComplete = (id) => {
    setTodos(
      todos.map((todo) =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  };

  const deleteTodo = (id) => {
    setTodos(todos.filter((todo) => todo.id !== id));
  };

  return (
    <div>
      <h2>මගේ 할 일 (My To-Do List)</h2>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id} style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
            <input
              type="checkbox"
              checked={todo.completed}
              onChange={() => toggleComplete(todo.id)}
            />
            {todo.text}
            <button onClick={() => deleteTodo(todo.id)} style={{ marginLeft: '10px' }}>
              මකන්න (Delete)
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

මේ TodoList component එකේ අපි todo.id එක key එක විදිහට පාවිච්චි කරනවා. දැන් හිතන්න, අපි මේ TodoList එකේ මුල්ම item එක ('කෑම උයන්න') delete කරනවා කියලා. todo.id එක key එක විදිහට පාවිච්චි කරපු නිසා, React හරියටම දන්නවා මොන <li> element එකද delete කරන්න ඕනේ කියලා. ඉතුරු <li> elements දෙකේ state එකට (e.g., checkbox checked ද නැද්ද කියන එක) කිසිම බලපෑමක් වෙන්නේ නෑ.

හැබැයි, අපි index එක key එක විදිහට පාවිච්චි කළා නම්, පළවෙනි item එක delete කරාම, දෙවෙනි item එකේ index එක 1 වෙනවා, තුන්වෙනි item එකේ index එක 2 වෙනවා. මේකෙන් React හිතන්නේ කලින් දෙවෙනි item එකට අයිති වෙලා තිබුණු state එක දැන් පළවෙනි item එකට අයිති වෙනවා කියලා (දැන් දෙවෙනි item එක වෙච්ච), ඒ වගේම කලින් තුන්වෙනි item එකට අයිති වෙලා තිබුණු state එක දෙවෙනි item එකට අයිති වෙනවා කියලා. මේකෙන් checkbox එකේ state එක වගේ දේවල් අවුල් වෙන්න පුළුවන්, ඒ කියන්නේ කලින් checked වෙලා තිබුණු item එකක් checked නැතුව පෙන්වන්න පුළුවන්, නැත්නම් අනවශ්‍ය විදිහට checked වෙන්නත් පුළුවන්.

හොඳම පුරුදු සාරාංශයක් (Best Practices Summary):

• හැමවිටම, list එකක render කරන හැම element එකකටම key prop එකක් දෙන්න.
• key එකට අදාල data item එකේ තිබෙන unique සහ stable ID එකක් (item.id, product.sku, etc.) පාවිච්චි කරන්න.
• කිසිම විටක index එක key එකක් විදිහට පාවිච්චි කරන්න එපා, විශේෂයෙන්ම list එකේ items add, remove, හෝ reorder කරනවා නම්.
• කිසිම විටක Math.random() වගේ function එකකින් generate කරන random values key එකක් විදිහට පාවිච්චි කරන්න එපා. ඒක stable නෙවෙයි!
• අදාල item එකේ stable ID එකක් නැති අවස්ථාවකදී පමණක් uuid වැනි library එකක් පාවිච්චි කරලා client-side ID එකක් generate කරන්න.

නිගමනය (Conclusion) ✨

ඉතින් යාලුවනේ, ReactJS වල List Rendering සහ Keys කියන මාතෘකාව එතරම් සංකීර්ණ එකක් නෙවෙයි නේද? අපි දැක්කා map() method එකෙන් arrays වලින් React elements list එකක් හදාගන්න පුළුවන් හැටි. ඒ වගේම, key prop එකේ අත්‍යවශ්‍යතාවයත්, ඒක unique සහ stable වෙන්න ඕනේ ඇයි කියලත් අපි තේරුම් ගත්තා.

key prop එක හරියට පාවිච්චි කිරීමෙන් ඔබේ React applications වල performance වැඩි දියුණු කරගන්න පුළුවන් වගේම, unexpected bugs වලින් වැලකී සිටින්නත් පුළුවන්. මතක තියාගන්න, හොඳම පුරුද්ද තමයි හැමවිටම ඔබේ data වලම තියෙන stable, unique ID එකක් key prop එකට පාවිච්චි කරන එක.

මේ tutorial එකෙන් ඔබට මේ concepts පැහැදිලි වුණා කියලා හිතනවා. දැන් ඔබේම React project එකක මේ concepts apply කරලා බලන්න. ඔබට මේ ගැන තියෙන ප්‍රශ්න හෝ අත්දැකීම් comment section එකේ බෙදාගන්නත් අමතක කරන්න එපා! අපි නැවතත් තවත් වැදගත් topic එකකින් හමුවෙමු!

සතුටින් code කරන්න! 🚀