React Hook state updating without calling setState

Question

I am running into an issue with React where my hook state is updating without my calling setState.

  const [dataSet2, setDataSet2] = React.useState([
    [2, 3, 4],
    [5, 6, 7],
    [8, 9, 9],
  ]);

  const badFunction = () => {
    let selections = [];
    let newSelections = [];
    let winPercent = 0;
    let newWinPercent = 1;
    const depth = 2;
    const dataHolderTest = dataSet2;
    let firstWeekTest = dataHolderTest[0];
    const weekOneTeamsTest = firstWeekTest.slice(0, depth);

    for (const weekOneTeamTest of weekOneTeamsTest) {
      let secondWeekTest = dataHolderTest[1];

      newWinPercent = weekOneTeamTest.win_percent * newWinPercent;
      newSelections.push(weekOneTeamTest.team);
      for (const team2 of secondWeekTest) {
        removeAllSelectedTeams(newSelections, secondWeekTest, team2);
      }
    }

    console.log(dataSet2);

};

  const removeAllSelectedTeams = (selections, dataHolder, team) => {
    if (selections.includes(team.team)) {
      const currentTeam = dataHolder.indexOf(team);
      dataHolder.splice(currentTeam, 1);
    }
    return dataHolder;
  };

I've been picking through this for a while now and it seems like the removeAllSelectedTeams function is the problem.

Still I don't understand how my dataSet2 is being altered without calling the hook setDataSet2

[`.splice`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) mutates the current state. — Emile Bergeron, Sep 28 '21 at 18:01
Does this answer your question? [How to delete an item from state array?](https://stackoverflow.com/questions/36326612/how-to-delete-an-item-from-state-array) — Emile Bergeron, Sep 28 '21 at 18:02
@EmileBergeron but I am not running `.splice` on dataSet2 only on a copy of it. — tdammon, Sep 28 '21 at 18:05
You're not using a copy. This `const dataHolderTest = dataSet2` doesn't create a copy. See: https://stackoverflow.com/q/7486085/1218980 — Emile Bergeron, Sep 28 '21 at 18:15

score 3 · Accepted Answer · edited Sep 28 '21 at 18:14

3

If you want to make a copy of an array or an object, you need to do it like this. listTwo = [...listOne] or ObjectTwo = {...ObjectOne}. Simply using = and not using the spread operator does not make a copy of that array or object for you, rather gives you another reference to the same array or object.

edited Sep 28 '21 at 18:14

Daniel Beck

20,653
5
38
53

answered Sep 28 '21 at 18:11

Sobhan Jahanmard

821
5
16

score 0 · Answer 2 · answered Sep 28 '21 at 18:11

0

Try copying the array to dataHolderTest instead of assigning it equal to dataSet2 with the spread operator ...

This way your not changing the original dataSet2 variable when interacting with dataHolderTest

const dataHolderTest = [...dataSet2]

answered Sep 28 '21 at 18:11

Eric Pezzulo

299
4
18

React Hook state updating without calling setState

2 Answers2