React elements get rendered twice - reactjs

Question

The render function does not get called twice, but instead the elements of a list are duplicated, and after a refresh of the application everything works just fine and the duplicates disappear. It seems to be a corner case but I can't get my head around it. Also worth mentioning that once an element is deleted from the list, both the element and its duplicate dissapear.
What could possibly cause such a bug?
import React, { useContext, useEffect, useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import {
fetchSavedInternships,
selectAllSavedInternships,
} from "./savedInternshipsSlice";
import { fetchInternships, selectAllInternships } from "../Anonymous/internshipsSlice";
import Loading from "../Universal/Loading";
import InternshipCard from "../Anonymous/InternshipCard";
import { v4 as uuidv4 } from "uuid";
import TabMenu from "../Universal/TabMenu";
const SavedInternships = () => {
const dispatch = useDispatch();
const savedInternships = useSelector(selectAllSavedInternships);
const statusSavedInternships = useSelector((state) => state.savedInternships.status);
const errorSavedInternships = useSelector((state) => state.savedInternships.error);
const internships = useSelector(selectAllInternships);
const statusInternships = useSelector((state) => state.internships.status);
const errorInternships = useSelector((state) => state.internships.error);
useEffect(() => {
let user = JSON.parse(sessionStorage.getItem("user"));
if (statusSavedInternships === "idle") {
dispatch(fetchSavedInternships(user.id));
}
if (statusInternships === "idle") {
dispatch(fetchInternships);
}
console.log("savedInternships");
}, []);
return (
<>
<TabMenu />
<br />
{(statusSavedInternships === "loading" || statusInternships === "loading") && (
<Loading />
)}
{statusSavedInternships === "succeeded" && (
<>
{savedInternships.length > 0 ? (
<div className="container">
<div className="row text-center ml-1">
<h5>Stagii salvate</h5>
</div>
<div className="row row-cols-2 row-cols-md-3 row-cols-lg-4">
{savedInternships.map((savedInternship) => (
<div key={uuidv4()} className="mb-3 col">
<div className="card">
<InternshipCard
internshipId={savedInternship.internshipId}
companyId={
internships.find((c) => c.id === savedInternship.internshipId)
?.companyId
}
/>
</div>
</div>
))}
</div>
</div>
) : (
<div className="text-center text-muted">Nu ai salvat niciun stagiu</div>
)}
</>
)}
{statusSavedInternships === "error" && <div>{errorSavedInternships}</div>}
</>
);
};
export default SavedInternships;

Answer 1

You can either check the value of savedInternships on first render and resolve issues with state part if there is any or you can implicitly put the respective dependencies you are checking in the useEffect, here you can check the mutation of statusSavedInternships and statusInternships prior getting into useEffect.