Handling Dynamic List Changes

🔄 Handling Dynamic List Changes in React

Dynamic lists are at the heart of most modern UIs — whether you're building a task manager, shopping cart, or chat app. In React, managing these lists efficiently requires you to master adding, updating, and deleting items using state and reactivity. ⚙️

📋 What Are Dynamic List Changes?

Dynamic changes refer to list modifications that happen during runtime, such as:

• ➕ Adding new items
• 📝 Editing existing items
• ❌ Deleting items
• 🔃 Reordering items

Let’s go through how to handle these changes with clean React patterns using useState.

🧱 Initial Setup: List with useState

const [tasks, setTasks] = useState([
  { id: 1, text: "Learn React" },
  { id: 2, text: "Build a project" }
]);

This array holds our dynamic list in state.

➕ Adding a New Item

const addTask = () => {
  const newTask = {
    id: Date.now(),
    text: "New Task"
  };
  setTasks([...tasks, newTask]);
};

We use the spread operator [...tasks] to preserve old items and append the new one. Date.now() ensures a unique ID.

❌ Deleting an Item

const deleteTask = (id) => {
  const filteredTasks = tasks.filter(task => task.id !== id);
  setTasks(filteredTasks);
};

This pattern keeps only the tasks that don't match the given id, effectively removing the selected item.

📝 Editing an Item

const editTask = (id, newText) => {
  const updatedTasks = tasks.map(task => 
    task.id === id ? { ...task, text: newText } : task
  );
  setTasks(updatedTasks);
};

Here, we use .map() to replace only the task we want to update while keeping others unchanged.

🔃 Reordering Items

You can reorder items using logic like drag-and-drop or simple button click swaps. Here's an example to move an item up:

const moveUp = (index) => {
  if (index === 0) return;
  const newTasks = [...tasks];
  [newTasks[index - 1], newTasks[index]] = [newTasks[index], newTasks[index - 1]];
  setTasks(newTasks);
};

This swaps the current task with the one above it.

🔑 Always Use Keys When Rendering

{tasks.map(task => (
  <li key={task.id}>{task.text}</li>
))}

Keys help React optimize rendering and avoid weird bugs during dynamic updates. Never skip them!

🧠 Common Mistakes to Avoid

• 🚫 Mutating the original array (always create a new copy)
• 🚫 Using non-unique or unstable keys (like array index)
• 🚫 Forgetting to bind event handlers (especially in loops)

✅ Best Practices

• Use useState or useReducer for complex updates
• Always clone the array using spread or slice() before changing it
• Keep logic like add/edit/delete in separate helper functions

📌 Complete Example: Add & Delete Tasks

const TaskManager = () => {
  const [tasks, setTasks] = useState([]);

  const addTask = () => {
    const newTask = { id: Date.now(), text: "New Task" };
    setTasks([...tasks, newTask]);
  };

  const deleteTask = (id) => {
    setTasks(tasks.filter(task => task.id !== id));
  };

  return (
    <div>
      <button onClick={addTask}>Add Task</button>
      <ul>
        {tasks.map(task => (
          <li key={task.id}>
            {task.text}
            <button onClick={() => deleteTask(task.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

This simple UI gives full control to add or delete items from a dynamic list.

🧠 Recap

• Use useState to manage your list data
• Use map() to display list items dynamically
• Use filter() for deletions and map() for updates
• Always use unique keys in the JSX loop

Mastering dynamic list changes gives you the power to create real-world apps like to-do lists, carts, feeds, and dashboards. 🛠️

🚀 What’s Next?

• Build a drag-and-drop sortable list
• Learn useReducer for more complex state updates
• Explore libraries like Immer to handle immutable data easily

React makes it easy to manage dynamic lists — once you get the hang of the patterns, there’s no limit to what you can build. 💪