React中setState与memo配合的状态异常及原理疑问

Hey there! Let’s break down what’s happening with your task manager app and why functional setState fixes the weird state errors you’re seeing—even if you don’t think you’re making back-to-back state changes.

The Root Issue: Async State & Closure Traps #

First, let’s look at your toggleDoneTask function:

const toggleDoneTask = (id) => {
 let taskItemsCopy = [...taskItems].map((task) => ({ ...task }))
 let newItems = taskItemsCopy.map((t) => {
 if (t.id === id) {
 t.done = !t.done
 };
 return t;
 })
 updateItems(newItems)
}

You’re making a copy of taskItems (your current state) to modify, but here’s the catch: React’s setState is asynchronous. It doesn’t update the state immediately when you call it.

When you click two different task checkboxes, the second call to toggleDoneTask might still be using the original taskItems value from when the function was first created (thanks to JavaScript closures), not the updated state from the first click. This means your second update overwrites the first, leading to incorrect state for other tasks.

How Functional setState Fixes This #

The functional form of setState takes the previous state as an argument, guaranteeing you always work with the most up-to-date state—no matter when React processes the update. Let’s rewrite your toggleDoneTask to use this approach:

const toggleDoneTask = (id) => {
  setTaskItems(prevTasks => {
    const updatedTasks = prevTasks.map(task => {
      if (task.id === id) {
        // Return a new task object instead of mutating the old one
        return { ...task, done: !task.done };
      }
      return task;
    });
    localStorage.setItem('tasks', JSON.stringify(updatedTasks));
    return updatedTasks;
  });
}

For cleaner code, you can also move the localStorage sync to a useEffect hook (this avoids repeating code across state updates):

// Sync state to localStorage whenever it changes
useEffect(() => {
  localStorage.setItem('tasks', JSON.stringify(taskItems));
}, [taskItems]);

// Simplified toggle function
const toggleDoneTask = (id) => {
  setTaskItems(prevTasks => 
    prevTasks.map(task => 
      task.id === id ? { ...task, done: !task.done } : task
    )
  );
}

How memo Makes This Issue More Noticeable #

Your memo usage on TaskRow is great for performance—it prevents unnecessary re-renders. But it also makes the state error more obvious: if your state update uses an old value, the memoized components won’t re-render with the correct state, making the bug impossible to miss. Without memo, components would re-render more often, potentially hiding the underlying issue—but the bug would still exist!

Quick Check on Your memo Comparator #

Your custom comparator for memo looks solid—it properly checks if all task properties are identical. Since your tasks are flat objects (no nested data), this works perfectly.

内容的提问来源于stack exchange，提问作者Franco