React hook useState method updates array unexpectedly

Question

I am learning React hook and tried to update an array value. What I want to achieve is when the button is clicked, the name and the counter of the first element perform the +1 operation. However, the code performs the operation twice instead. So the button shows

Initial : Click 0 FirstArgument

Click 1 : Click 1 FirstArgument1

Click 2 : Click 3 FirstArgument111

Click 3 : Click 5 FirstArgument11111

...

Here is the code snipe:

import React, { useState } from "react";

function HookCount() {
  const initState = [
    {
      counter: 0,
      name: "FirstArgument",
    },
    "SecondArgument",
  ];

  const [variable, setCount] = useState(initState);

  const setStateFun = () => {
    setCount((prevVariable) => {
      let updateList = [...variable];
      updateList[0].name = prevVariable[0].name + 1;
      updateList[0].counter = prevVariable[0].counter + 1;
      updateList[1] = prevVariable[1];
      return updateList;
    });
  };

  return (
    <div>
      <button onClick={setStateFun}>
        Click {variable[0].counter} {variable[0].name}
      </button>
    </div>
  );
}

export default HookCount;

The questions that I have are:

1. Why the code behaves like that. What I did wrong or what is the proper way to achieve this.

2. If I replace let updateList = [...variable]; with let updateList = prevVariable; the state does not change anymore. Why can't we use prevVariable instead of spread the array here?

Answer 1

I don't see setCount or variable defined anywhere it your code, so I cannot guess how you implemented them. However, setStateFun is just overcomplicated.

By using the functional setState , you already have access to prevVariable . To perform the increment, it can be simplified like so:

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [variable, setCount] = useState([
    {
      counter: 0,
      name: "FirstArgument"
    },
    "SecondArgument"
  ]);

  const setStateFun = () => {
    setCount(prevVariable => [
      {
        counter: prevVariable[0].counter + 1,
        name: prevVariable[0].name + 1
      },
      prevVariable[1]
    ]);
  };

  return (
    <div>
      <button onClick={setStateFun}>
        Click {variable[0].counter} {variable[0].name}
      </button>
    </div>
  );
}

See it here: