ReactJS Lists & Keys: ගැඹුරින් ඉගෙන ගනිමු | Sinhala Guide

ඉතින් කොහොමද යාලුවනේ! අද අපි ReactJS වල ගොඩක් වැදගත් concept එකක් ගැන කතා කරන්නයි යන්නේ – ඒ තමයි List Rendering සහ key prop එක. මේක හරියටම තේරුම් ගත්තේ නැත්නම්, අපේ application එකේ performance ප්‍රශ්න එන්න පුළුවන් වගේම, සමහර වෙලාවට UI එකේ අවුල් සහගත තත්ත්වයන් පවා ඇතිවෙන්න පුළුවන්. ඒ නිසා, මේක හොඳින් තේරුම් ගැනීම අත්‍යවශ්‍යයි.

List Rendering කියන්නේ මොකක්ද?

ඔයාලා දන්නවා ඇති, අපි web applications හදනකොට ගොඩක් වෙලාවට එකම වගේ දේවල් ගොඩක් පෙන්නන්න වෙනවා. උදාහරණයක් විදියට, to-do list එකක tasks, blog posts, user comments වගේ දේවල්. මේ වගේ අවස්ථාවලදී, එකින් එකට manually HTML ලියනවා වෙනුවට, අපි JavaScript array එකක තියෙන data ටිකක් අරගෙන, ඒකෙන් components ගොඩක් dynamically render කරනවා.

React වලදී මේකට ගොඩක් වෙලාවට පාවිච්චි කරන්නේ Array.prototype.map() method එක. මේකෙන් array එකක තියෙන හැම item එකකටම අලුත් component එකක් හදලා, ඒ හැම component එකක්ම එකට එකතු කරලා render කරන්න පුළුවන්.

සරල උදාහරණයක්: To-Do List එකක් Render කිරීම

අපි හිතමු අපිට කරන්න තියෙන tasks ටිකක් array එකක තියෙනවා කියලා:

import React from 'react';

function TodoList() {
  const todos = ['Learn React', 'Build a Project', 'Deploy to Production'];

  return (
    <div>
      <h2>My To-Do List</h2>
      <ul>
        {todos.map(todo => (
          <li>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

මේ code එකෙන් අපිට පුළුවන් todos array එකේ තියෙන හැම task එකක්ම <li> tag එකක් විදියට render කරගන්න. මේක ලස්සනට වැඩ කරනවා, ඒත් අපිට console එකේ warning එකක් එයි. ඒ තමයි: Warning: Each child in a list should have a unique "key" prop.

key Prop එකේ වැදගත්කම (The Unsung Hero!)

ඉතින් මේ key prop එක මොකටද? React කියන්නේ Virtual DOM එකක් හරහා වැඩ කරන library එකක්. අපේ component එකක state එකක් හරි props ටිකක් හරි වෙනස් වුණාම, React එක මුලින්ම කරන්නේ අලුත් Virtual DOM එකක් හදලා, ඒක කලින් Virtual DOM එකත් එක්ක compare (reconcile) කරන එකයි.

මේ compare කරන ක්‍රියාවලියේදී, React එකට දැනගන්න ඕනේ array එකක තියෙන item එකක්, කලින් තිබුණු array එකේ item එකමද කියලා. නැත්නම්, item එකක් add වුණාද, delete වුණාද, නැත්නම් order එක වෙනස් වුණාද කියලා. මේකට තමයි key prop එක පාවිච්චි කරන්නේ.

key එකක් නැත්නම්, React එකට list එකක වෙනස්කම් හරියටම detect කරන්න අමාරු වෙනවා. එතකොට වෙන්නේ, performance ප්‍රශ්න ඇතිවෙන එක (අනවශ්‍ය විදියට components re-render වීම) සහ සමහර වෙලාවට wrong component state ඇතිවෙන එක. හිතන්න input field තියෙන components list එකක් කියලා, keys නැත්නම් type කරන දේවල් කලවම් වෙන්න පුළුවන්.

key Prop එකේ නීති:

• Unique (අද්විතීය විය යුතුයි): List එකක තියෙන හැම key එකක්ම unique වෙන්න ඕනේ. හැබැයි මේ unique වීම අවශ්‍ය වෙන්නේ ඒ specific list එක ඇතුලේ විතරයි. වෙන list එකක ඒ key එකම පාවිච්චි කරන්න පුළුවන්.
• Stable (ස්ථාවර විය යුතුයි): List item එකක key එක, ඒ item එක ජීවත්වෙන තාක් කල් වෙනස් වෙන්නේ නැති, ස්ථාවර අගයක් වෙන්න ඕනේ.

කවදාවත් Array Index එක key විදියට පාවිච්චි කරන්න එපා! (பெரும் වැරැද්දක්!)

ගොඩක් අයට මුලින්ම එන අදහස තමයි map() function එකෙන් එන index එක key විදියට පාවිච්චි කරන එක.

import React from 'react';

function TodoListBadKeys() {
  const todos = ['Learn React', 'Build a Project', 'Deploy to Production'];

  return (
    <div>
      <h2>My To-Do List (Bad Keys)</h2>
      <ul>
        {/* අනතුරුදායකයි! මේකෙන් ගැටලු ඇතිවෙන්න පුළුවන් */}
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

export default TodoListBadKeys;

මේකෙන් console warning එක නැතිවෙයි. ඒත්, මේක ගොඩක් භයානකයි! විශේෂයෙන්ම list එකේ items වල order එක වෙනස් වෙනවා නම්, නැත්නම් items add වෙනවා නම්/remove වෙනවා නම්.

උදාහරණයක් විදියට, අපි හිතමු අපිට To-Do List එකක් තියෙනවා, ඒකෙන් tasks Delete කරන්න පුළුවන් කියලා.

import React, { useState } from 'react';

function InteractiveTodoList() {
  const [todos, setTodos] = useState([
    { id: 1, text: 'Learn React', isCompleted: false },
    { id: 2, text: 'Build a Project', isCompleted: false },
    { id: 3, text: 'Deploy to Production', isCompleted: false },
  ]);

  const removeTodo = (indexToRemove) => {
    setTodos(todos.filter((_, index) => index !== indexToRemove));
  };

  return (
    <div>
      <h2>Interactive To-Do List (Bad Index Key)</h2>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}> {/* මේ index key එකෙන් ගැටලු ඇති වෙනවා */}
            {todo.text}
            <button onClick={() => removeTodo(index)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default InteractiveTodoList;

දැන් හිතන්න, අපි 'Learn React' කියන පළවෙනි task එක delete කරනවා කියලා. todos array එක update වුණාම, 'Build a Project' කියන එක index 0 ට එනවා, 'Deploy to Production' කියන එක index 1 ට එනවා. React එක හිතන්නේ 'Learn React' වෙනුවට අලුතෙන් 'Build a Project' කියන එක index 0 ට ආවා කියලා. මේ නිසා, React එකට නිවැරදිව DOM elements update කරන්න බැරිවෙනවා, data mismatch වෙන්න පුළුවන්. විශේෂයෙන්ම input fields වගේ තියෙන අවස්ථා වලදී මේක ලොකු ප්‍රශ්නයක්.

නිවැරදිව key Prop එක භාවිත කරන හැටි (The Right Way!)

key එකට අපි හැමවිටම unique සහ stable වෙන identifier එකක් පාවිච්චි කරන්න ඕනේ. ගොඩක් වෙලාවට, අපේ data එකේම තියෙන id එකක් මේකට පාවිච්චි කරන්න පුළුවන්. ඒ id එක database එකකින් එන unique id එකක් වෙන්න පුළුවන්, නැත්නම් API එකකින් එන unique id එකක් වෙන්න පුළුවන්.

import React, { useState } from 'react';

function GoodTodoList() {
  const [todos, setTodos] = useState([
    { id: 1, text: 'Learn React', isCompleted: false },
    { id: 2, text: 'Build a Project', isCompleted: false },
    { id: 3, text: 'Deploy to Production', isCompleted: false },
  ]);

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

  return (
    <div>
      <h2>My To-Do List (Good Keys)</h2>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}> {/* නිවැරදි භාවිතය! */}
            {todo.text}
            <button onClick={() => removeTodo(todo.id)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default GoodTodoList;

මේ code එකේ අපි todo.id එක key විදියට පාවිච්චි කරනවා. id එක unique සහ stable නිසා, React එකට list එකේ වෙනස්කම් හරියටම detect කරන්න පුළුවන්. 'Learn React' task එක delete කළාම, React එක දන්නවා id: 1 තියෙන element එක remove වුණා කියලා. මේකෙන් performance එක හොඳ වෙනවා වගේම, UI එකේ බලාපොරොත්තු නොවන හැසිරීම් ඇතිවීමත් වළක්වාගන්න පුළුවන්.

id එකක් නැත්නම් මොකද කරන්නේ?

සමහර වෙලාවට අපිට unique id එකක් නැති data set එකක් එක්ක වැඩ කරන්න වෙන්න පුළුවන්. එහෙම වෙලාවට, uuid වගේ library එකක් පාවිච්චි කරලා unique id generate කරගන්න පුළුවන්. හැබැයි, ඒක කරන්න ඕනේ item එක මුලින්ම create කරන වෙලාවේදී විතරයි. render වෙන හැම පාරම අලුත් ID එකක් generate කරන්න එපා. එහෙම කළොත්, ඒකත් unstable key එකක් වෙනවා.

අවසාන වශයෙන් (Wrapping Up!)

ReactJS වල List Rendering සහ key prop එක කියන්නේ ඉතාම වැදගත් concepts දෙකක්. මේක හරියට තේරුම් අරගෙන, හැමවිටම unique සහ stable key එකක් පාවිච්චි කරන්න වගබලා ගන්න. Array index එක key එක විදියට පාවිච්චි කිරීමෙන් පුළුවන් තරම් වළකින්න. මේකෙන් ඔයාලගේ React applications වල performance එක වැඩි දියුණු වෙනවා වගේම, UI එකේ bugs අඩු කරගන්නත් පුළුවන්.

මේ ගැන ඔයාලගේ අදහස්, ප්‍රශ්න, නැත්නම් අත්දැකීම් comment section එකේ දාලා යන්න. අපි ඒ ගැන කතා කරමු. ඔයාලගේ ඊළඟ Project එකේදී මේ concepts නිවැරදිව implement කරන්න මතක තියාගන්න!