Component rerendering in reactjs - reactjs

Question

I am working on react app where one of my component when I place console.log('Hello') it keeps on re-rendering. I am not sure why. This is How my component looks.
Any help would be great
DispensingIncident.jsx
const DispensingIncidents = (props) => {
const classes = useStyles();
const {
getFilterData,
dispensingData,
getPeriodList,
getTypeList,
getOverviewData,
location,
history,
} = props;
const [timeSpan, setTimeSpan] = React.useState("Monthly");
const [year, setYear] = React.useState(2020);
const [tabValue, setTabValue] = React.useState(0);
const [spanData, setSpanData] = React.useState([]);
const [dataType, setDataType] = React.useState("aim");
const {
loading,
duration,
period,
type,
dispensingOverviewData,
overviewDataLoading,
} = dispensingData;
const { count } = dispensingOverviewData;
// console.log("props", duration["monthly"][0].period);
console.log("Hellowo");
useEffect(() => {
getPeriodList();
getTypeList();
// eslint-disable-next-line
}, []);
useEffect(() => {
history.replace({
pathname: location.pathname,
search: `?year=${year}&period=${timeSpan}`,
});
setYear(year);
setTimeSpan(timeSpan);
// eslint-disable-next-line
}, [year, timeSpan]);
useEffect(() => {
getFilterData(year);
// eslint-disable-next-line
}, [year]);
/**
* GET query from url search param
* #usage query.get("year")
*/
function useQuery() {
return new URLSearchParams(location.search);
}
const query = useQuery();
/**
*
* #param {*} event
* #param {*} newValue
* on tab change
*/
// eslint-disable-next-line
const handleTabChange = (event, newValue) => {
setTabValue(newValue);
};
/**
* Year change
* #param {*} event
*/
const handleYearChange = (event) => {
setYear(event.target.value);
setTimeSpan(query.get("period"));
};
/**
* Span change
* #param {*} event
*/
const handleSpanChange = (event) => {
const value = event.target.value;
setTimeSpan(value);
};
const time = query.get("period");
useEffect(() => {
if (time === "Yearly") {
const yearlyData = duration["yearly"];
setSpanData(yearlyData);
} else if (time === "Weekly") {
const weeklyData = duration["weekly"];
setSpanData(weeklyData);
} else if (time === "Quarterly") {
const quarterlyData = duration["quarterly"];
setSpanData(quarterlyData);
} else if (time === "Monthly") {
const monthlyData = duration["monthly"];
setSpanData(monthlyData);
} else if (time === "6 months") {
const halfYearlyData = duration["half-yearly"];
setSpanData(halfYearlyData);
}
}, [time, duration]);
const handleSpanTabChange = (data) => {
getOverviewData(year, data.period.to, data.period.from, dataType);
};
const handleDataTypeChange = (event) => {
setDataType(event.target.value);
};
if (loading) {
return (
<Loading/>
);
}
return (
<div className={classes.dispenseRoot}>
<Paper
elementType="div"
elevation={5}
square={true}
variant="elevation"
className={classes.topContainer}
>
// content here......
</Paper>
</div>
);
};
function mapStateToProps(state) {
return {
dispensingData: state.dispensing,
};
}
const mapDispatchToProps = (dispatch) => ({
getFilterData: (year) =>
dispatch({ type: GET_DISPENSING_INCIDENT_FILTER_DATA, year }),
getPeriodList: () => dispatch({ type: GET_DISPENSING_INCIDENT_PERIOD_LIST }),
getTypeList: () => dispatch({ type: GET_DISPENSING_INCIDENT_TYPE_LIST }),
getOverviewData: (period, to, from, datatype) =>
dispatch({ type: GET_DISPENSING_OVERVIEW, period, from, to, datatype }),
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(DispensingIncidents);
This is what happeing when i put console.log('Hello')