Array populating in UseEffect not showing up properly in React - reactjs

Question

In my useEffect I am populating two array each array there are two element. However, only one element in each array is showing on my page.
Here is the useEffect
useEffect(() => {
let tempArray = [...players];
if (secondTeam.length < Math.floor(Number(playersCount) / 2)) {
if (random) {
for (let i = 0; i < 4; i++) {
const num = Math.floor(Math.random() * tempArray.length);
if (i < Math.floor(Number(playersCount) / 2)) {
const tempFirstTeam = [...firstTeam];
tempFirstTeam.push(tempArray[num]);
setFirstTeam(tempFirstTeam);
} else {
const tempSecondTeam = [...secondTeam];
tempSecondTeam.push(tempArray[num]);
setSecondTeam(tempSecondTeam);
}
tempArray.splice(num, 1);
}
}
}
}, []);
Here is the entire jsx file
import { useState, useEffect } from "react";
import { registerGame } from "../features/game/gameSlice";
import { useSelector, useDispatch } from "react-redux";
import InputGroup from "react-bootstrap/InputGroup";
import { toast } from "react-toastify";
import PlayerImageAndName from "./PlayerImageAndName";
const vsStyle = {
position: "absolute",
top: "15%",
left: "50%",
transform: "translate(-50%, -50%)",
};
function PlayerSelection() {
const { playersCount, points, random, teamOne, teamTwo } = useSelector(
(state) => state.game.playerData
);
const dispatch = useDispatch();
const { players } = useSelector((state) => state.player);
const [firstTeam, setFirstTeam] = useState([]);
const [secondTeam, setSecondTeam] = useState([]);
const [playersChosen, setPlayersChosen] = useState(0);
useEffect(() => {
let tempArray = [...players];
if (secondTeam.length < Math.floor(Number(playersCount) / 2)) {
if (random) {
for (let i = 0; i < 4; i++) {
const num = Math.floor(Math.random() * tempArray.length);
if (i < Math.floor(Number(playersCount) / 2)) {
const tempFirstTeam = [...firstTeam];
tempFirstTeam.push(tempArray[num]);
setFirstTeam(tempFirstTeam);
} else {
const tempSecondTeam = [...secondTeam];
tempSecondTeam.push(tempArray[num]);
setSecondTeam(tempSecondTeam);
}
tempArray.splice(num, 1);
}
}
}
}, []);
return (
<div>
<div className="d-flex" style={{ height: "350px" }}>
<div className="p-2 flex-grow-1" style={{ display: "flex" }}>
{firstTeam.map((player) => (
<PlayerImageAndName key={player._id} player={player} />
))}
</div>
{secondTeam.length > 0 && (
<div className="p-2" style={vsStyle}>
<h1>Vs.</h1>
</div>
)}
<div className="p-2 flex-grow-1" style={{ display: "flex" }}>
{secondTeam.map((player) => (
<PlayerImageAndName key={player._id} player={player} />
))}
</div>
</div>
);
}
export default PlayerSelection;

Answer 1

setFirstTeam does not update firstTeam instantly
The same is true for setSecondTeam as well. Let's take just the for loop and simplify it to make the problem more apparent:
for (let i = 0; i < 4; i++) {
const tempFirstTeam = [...firstTeam];
tempFirstTeam.push(tempArray[num]);
setFirstTeam(tempFirstTeam);
}
This loop will run 4 times and each time it happens firstTeam has not changed and will always be []. Therefore, tempFirstTeam starts as an empty array and then has 1 thing pushed in to it.
So, instead, you need move both tempFirstTeam and tempSecondTeam outside your for loop, and set them once:
const tempFirstTeam = [...firstTeam];
const tempSecondTeam = [...secondTeam];
for (let i = 0; i < 4; i++) {
const num = Math.floor(Math.random() * tempArray.length);
if (i < Math.floor(Number(playersCount) / 2)) {
tempFirstTeam.push(tempArray[num]);
} else {
tempSecondTeam.push(tempArray[num]);
}
tempArray.splice(num, 1);
}
setFirstTeam(tempFirstTeam);
setSecondTeam(tempSecondTeam);