Axios function is running twice for some reason in react - reactjs

Question

Im not sure why but it seems that my axios function is running twice is there any way I could circumvent this? I have a couple useState methods above but I am still confused why it is basically running everything twice
here is the code that is running twice in react
function App() {
let num = [];
num[0] = 0;
if (localStorage.getItem("winstreak") === null) {
localStorage.setItem("winstreak", JSON.stringify(num));
} else {
}
let winstreak = JSON.parse(localStorage.getItem("winstreak"));
let array = JSON.stringify(localStorage.getItem("winstreak"));
let streaks = winstreak.reduce(
function (res, n) {
if (n) res[res.length - 1]++;
else res.push(0);
return res;
},
[1]
);
let streak = Math.max.apply(Math, streaks);
var current = localStorage.getItem("gamesplayed", 0);
var correct = localStorage.getItem("correctgames", 0);
localStorage.getItem("winstreak", winstreak);
const [victory, setVictory] = useState("");
const [seconds, setseconds] = useState();
const [minutes, setminutes] = useState();
const [hours, sethours] = useState("");
const [useHint, setHint] = useState(false);
const [gamestatus, setGameStatus] = useState(false);
const [Attempts, SetAttempts] = useState(0);
const [divnum, setDiv] = useState(1);
const [complete, setComplete] = useState(false);
const [isOpen, setIsOpen] = useState(false);
const [buttonpopup, setbuttonpopup] = useState(false);
const [tweets, setTweet] = useState();
const [sharebut, setSharebut] = useState(false);
const [answer, setAnswer] = useState();
const [answer2, setAnswer2] = useState();
getTweet();
function getTweet() {
axios
.get("https://tweetleserver.herokuapp.com/")
.then((res) => {
setTweet(res.data.data.id);
setAnswer(res.data.includes.users[0].name);
setAnswer2(res.data.includes.users[0].username);
console.log("test");
return;
})
.catch((err) => {
console.log(err);
return;
});
}
}
I am calling this function only once but I am still confused as to why it could be doing this

Answer 1

just move the getTweet() inside useEffect will solve the infinit loop (whether you have it) because it's not nice practice if you call it directly in the body of the functional component.
Also i would prefer to have one setState , so one state instead of having multi states .
I mean instead of :
setTweet(res.data.data.id);
setAnswer(res.data.includes.users[0].name);
setAnswer2(res.data.includes.users[0].username);
you can write this :
setSomeState(prevState => ({
...prevState,
tweet: res.data.data.id
answer: res.data.includes.users[0].name,
answer2: res.data.includes.users[0].username
}));
and the state will be :
const [someState, setSomeState] = useState({
tweet: "",
answer: "",
answer2: ""
});