When an item is pushed to useState array, it's pushing twice-CodePudding

I have an issue with pushing an item to array inside the useState hook. When I try to push one element, it pushing twice. Code below:

export default function App() {
  const [max, updateMax] = React.useState([]);
  const [mid, updateMid] = React.useState([]);
  const [low, updateLow] = React.useState([]);

  const arr = [
    { letter: "A", number: 100 },
    { letter: "B", number: 80 },
    { letter: "C", number: 60 },
    { letter: "D", number: 40 }
  ];

  useEffect(() => {
    arr.map((element, index, array) => {
      element.number === 100
        ? updateMax((prevState) => [...prevState, element.letter])
        : element.number >= 60
        ? updateMid((prevState) => [...prevState, element.letter])
        : element.number < 60
        ? updateLow((prevState) => [...prevState, element.letter])
        : null;
    });
  }, []);
  console.log(max, mid, low);

  return <div className="App"></div>;
}

In console:

["A", "A"]
["B", "C", "B", "C"]
["D", "D"]

Expected output:

["A"]
["B", "C"]
["D"]

Why it's behaving like this?

CodePudding user response：

The reason it runs twice is because you're running your app in Strict Mode.

Since React 18, developers of React decided to make useEffect() run twice when the app uses Strict Mode to help debugging useEffect(). If you get unexpected results from it running twice, it means that your code has some kind of smaller or bigger problem, either lack of proper cleanup code, or a little messy logic.

In your case, useEffect() is not the best fit for what you're trying to do. Try useMemo() instead.

CodePudding user response：

It's likely this is happening due to the [...prevState,..] assignment. It could be possible that your useEffect fires twice, which in turn makes the function run twice.

One thing you can do to avoid duplicate items in your arrays, is to add a precondition to your update calls.

const isLetterAlreadyPresent = (arrayToCheck: string[], letterToCheck: string) => {
    return arrayToCheck.some((letter) => letter === letterToCheck));
}

useEffect(() => {
    arr.forEach((element, index, array) => {
      if (element.number === 100 && !isLetterAlreadyPresent(max, element.letter) {
         updateMax((prevState) => [...prevState, element.letter])
      } else if (element.number >= 60 && !isLetterAlreadyPresent(mid, element.letter)){
         updateMid((prevState) => [...prevState, element.letter])
      } else if (element.number < 60 && !isLetterAlreadyPresent(low, element.letter)) {
         updateLow((prevState) => [...prevState, element.letter])
      }
    });
  }, []);

I also changed the map for a forEach, since you weren't using the result array that was given by the map, nor were you transforming anything within it. In order to iterate over an array, a forEach should suffice.