Updating State in React: Best Practices & Examples

function handleClick() {
  setCount(count + 1);
  console.log(count);   // Still shows the OLD value
}

// Wrong — both lines use the same old count, so it only increases by 1
setCount(count + 1);
setCount(count + 1);

// Correct — the functional form uses the latest value each time
setCount(prevCount => prevCount + 1);
setCount(prevCount => prevCount + 1);

const [student, setStudent] = useState({ name: "Priya", progress: 40 });

// Wrong — React does not detect this
student.progress = 60;
setStudent(student);

// Correct — create a new object
setStudent({ ...student, progress: 60 });

const [tasks, setTasks] = useState(["Watch lesson 1", "Solve exercise 1"]);

// Adding — create a new array
setTasks([...tasks, "Watch lesson 2"]);

// Removing — filter returns a new array
setTasks(tasks.filter(task => task !== "Solve exercise 1"));

// Updating one item — map returns a new array
setTasks(tasks.map(task => task === "Watch lesson 1" ? "Watch lesson 1 (done)" : task));

import { useState } from "react";

function TaskList() {
  const [tasks, setTasks] = useState([
    { id: 1, text: "Complete JSX lesson", done: true },
    { id: 2, text: "Build a course card", done: false }
  ]);

  function toggleTask(id) {
    setTasks(tasks.map(task =>
      task.id === id ? { ...task, done: !task.done } : task
    ));
  }

  return (
    <ul>
      {tasks.map(task => (
        <li key={task.id}>
          <span>{task.done ? "✓" : "○"} {task.text}</span>
          <button onClick={() => toggleTask(task.id)}>Toggle</button>
        </li>
      ))}
    </ul>
  );
}

export default TaskList;