React useState infinity loop - reactjs

Question

I would like to learn React and therefore trying to build a logfile parser for myself to parse Apache HTTP Logs in CLF format.
However, trying to do this always causes an infinity loop.
import React, { useEffect} from "react";
import logfile from './logfile';
import parse from "clf-parser";
function App() {
const [logContent, setLog] = React.useState([]);
useEffect(()=>{
if(Object.keys(logContent).length === 0){
fetch(logfile)
.then(r => r.text())
.then(text => {
const data = text.split('\n').map(entry => {
return parse(entry);
});
return data;
}).then(
obj => {
console.log(obj);
setLog(obj);
return;
}
);
}
}, [])
return (
<div>
<header><h1>Logfile Parser</h1></header>
<main>{
logContent.map(entry => {
return (<div key={entry.key}>{entry.remote_addr}</div>)
}
)}</main>
</div>
);
}
It's directly related to the setLog(obj);, if I don't use it I have only two entries in my console. Why two and not one though? How to fix this problem?

Answer 1

As M. Elghamry pointed out correct in the comments, the checking for the logContent within the useEffect() was the problem.
After removing the if statement, the loop does not continue happening.
import React, { useEffect} from "react";
import logfile from './logfile';
import parse from "clf-parser";
function App() {
const [logContent, setLog] = React.useState([]);
useEffect(()=>{
fetch(logfile)
.then(r => r.text())
.then(text => {
const data = text.split('\n').map(entry => {
return parse(entry);
});
return data;
}).then(
obj => {
console.log(obj);
setLog(obj);
return;
}
);
}, [])
return (
<div>
<header><h1>Logfile Parser</h1></header>
<main>{
logContent.map(entry => {
return (<div key={entry.key}>{entry.remote_addr}</div>)
}
)}</main>
</div>
);
}