title: React Memo resets values in component state
body: <p><strong>What I am trying to do</strong></p>
  <ol>
  <li>I'm trying to use an array of objects (habits) and render a &quot;Card&quot; component from each one.</li>
  <li>Now for each Card (habit) you can &quot;mark&quot; that habit as done, which will update that Card's state.</li>
  <li>I've used React.memo to prevent other Cards from re-rendering.</li>
  <li>Whenever the user mark a card as done, the card header gets changed to &quot;Edited&quot;</li>
  </ol>
  <p><strong>The Issue I'm facing</strong></p>
  <p>Whenever a card is marked as done, the header changes alright, but whenever any <em>other</em> card is marked as done, the first card's state gets reverted back.</p>
  <p>I've not been able to find other people facing a similar issue, can somebody please help?</p>
  <p><strong>Here is the code:</strong></p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  
  const initialState = {
    habits: [
      {
        id: &quot;1615649099565&quot;,
        name: &quot;Reading&quot;,
        description: &quot;&quot;,
        startDate: &quot;2021-03-13&quot;,
        doneTasksOn: [&quot;2021-03-13&quot;]
      },
      {
        id: &quot;1615649107911&quot;,
        name: &quot;Workout&quot;,
        description: &quot;&quot;,
        startDate: &quot;2021-03-13&quot;,
        doneTasksOn: [&quot;2021-03-14&quot;]
      },
      {
        id: &quot;1615649401885&quot;,
        name: &quot;Swimming&quot;,
        description: &quot;&quot;,
        startDate: &quot;2021-03-13&quot;,
        doneTasksOn: []
      },
      {
        id: &quot;1615702630514&quot;,
        name: &quot;Arts&quot;,
        description: &quot;&quot;,
        startDate: &quot;2021-03-14&quot;,
        doneTasksOn: [&quot;2021-03-14&quot;]
      }
    ]
  };
  
  export default function App() {
    const [habits, setHabits] = useState(initialState.habits);
  
    const markHabitDone = (id) =&gt; {
      let newHabits = [...habits];
      let habitToEditIdx = undefined;
  
      for (let i = 0; i &lt; newHabits.length; i++) {
        if (newHabits[i].id === id) {
          habitToEditIdx = i;
          break;
        }
      }
  
      let habit = { ...habits[habitToEditIdx], doneTasksOn: [], name: &quot;Edited&quot; };
      newHabits[habitToEditIdx] = habit;
      setHabits(newHabits);
    };
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;section className=&quot;test-habit-cards-container&quot;&gt;
          {habits.map((habit) =&gt; {
            return (
              &lt;MemoizedCard
                markHabitDone={markHabitDone}
                key={habit.id}
                {...habit}
              /&gt;
            );
          })}
        &lt;/section&gt;
      &lt;/div&gt;
    );
  }
  
  const Card = ({
    id,
    name,
    description,
    startDate,
    doneTasksOn,
    markHabitDone
  }) =&gt; {
    console.log(`Rendering ${name}`);
    return (
      &lt;section className=&quot;test-card&quot;&gt;
        &lt;h2&gt;{name}&lt;/h2&gt;
        &lt;small&gt;{description}&lt;/small&gt;
        &lt;h3&gt;{startDate}&lt;/h3&gt;
        &lt;small&gt;{doneTasksOn}&lt;/small&gt;
        &lt;div&gt;
          &lt;button onClick={() =&gt; markHabitDone(id, name)}&gt;Mark Done&lt;/button&gt;
        &lt;/div&gt;
      &lt;/section&gt;
    );
  };
  
  const areCardEqual = (prevProps, nextProps) =&gt; {
    const matched =
      prevProps.id === nextProps.id &amp;&amp;
      prevProps.doneTasksOn === nextProps.doneTasksOn;
  
    return matched;
  };
  
  const MemoizedCard = React.memo(Card, areCardEqual);
  </code></pre>
  <p><strong>Note:</strong> This works fine without using React.memo() wrapping on the Card component.</p>
  <p><strong>Here is the codesandbox link:</strong> <a href="https://codesandbox.io/s/winter-water-c2592?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/winter-water-c2592?file=/src/App.js</a></p>