eact Hook useEffect has a missing dependency: ' xyz '. Either include it or remove the dependency array - reactjs

Question

I'm trying to add infinite scroll to my page but it's only showing me the mongo data. and while running react it's showing me a warning that says:-
"src\components\Article.jsx
React Hook useEffect has a missing dependency: 'news'. Either include it or remove the dependency array. You can also do a functional update 'setNews(n => ...)' if you only need 'news' in the 'setNews' call react-hooks/exhaustive-deps"
Article.jsx
import { useEffect , useState} from "react";
import { getNews } from "../service/api";
import InfiniteScroll from 'react-infinite-scroll-component';
import Articles from "./Articles";
const Article = () => {
const [news, setNews] = useState([]);
const [page, setPage] = useState(0);
useEffect(() => {
const dailyNews = async () => {
const response = await getNews(page);
console.log(new Set([...news, ...response.data]));
setNews([...new Set([...news, ...response.data])]);
}
dailyNews();
}, [page])
useEffect(() => {
console.log(news);
}, [news])
return(
<InfiniteScroll
dataLength={news.length *5 }
pullDownToRefreshThreshold={50}
next ={ () => setPage(page => page + 1)}
hasMore={true}
loader={<h4>Loading...</h4>}>
{
news.map(article =>(
<Articles article={article} />
))
}
</InfiniteScroll >
)
}
export default Article;
and Articles.jsx
import { Card, CardContent, Typography, styled, Grid } from "#mui/material";
const Component = styled(Card)`
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
margin-bottom: 20px;
`;
const Container = styled(CardContent) `
display: flex;
padding: 8px;
padding-bottom: 4px !important;
`;
const Image = styled('img')({
height: 268,
width: '88%',
borderRadius: 5,
objectFit: 'cover'
});
const RightContainer = styled(Grid)(({ theme }) => ({
margin: '5px 0px 0 -25px',
display: 'flex',
flexDirection: 'column',
[theme.breakpoints.between('sm', 'lg')]: {
padding: '0 5px'
},
[theme.breakpoints.down('sm')]: {
margin: '5px 0'
}
}));
const Title = styled(Typography)`
font-weight: 300;
color: #44444d;
font-size: 22px;
line-height: 27px;
`;
const Author = styled(Typography)`
color: #808290;
font-size: 12px;
line-height: 22px;
`;
const Description = styled(Typography)`
line-height: 22px;
color: #44444d;
margin-top: 5px;
font-family: 'Roboto',sans-serif;
font-weight: 300;
`;
const Short = styled('b')({
color: '#44444d',
fontFamily: "'Convergence', sans-serif"
})
const Publisher = styled(Typography)`
font-size: 12px;
margin-top: auto;
margin-bottom: 10px;
'& > *': {
textDecoration: 'none',
color: '#000',
fontWeight: 900
}
`;
const Articles = ({ article }) => {
return (
<Component>
<Container>
<Grid container>
<Grid lg={5} md={5} sm={5} xs={12} item>
<Image src={article.url} />
</Grid>
<RightContainer lg={7} md={7} sm={7} xs={12} item>
<Title>{article.title}</Title>
<Author>
<Short>short</Short> by {article.author} / {new Date(article.timestamp).toDateString()}
</Author>
<Description>{article.description}</Description>
<Publisher>
read more at {article.publisher}
</Publisher>
</RightContainer>
</Grid>
</Container>
</Component>
)
}
export default Articles;
Try to write like this
useEffect(() => {
const dailyNews = async () => {
const response = await getNews(page);
console.log(new Set([...news, ...response.data]));
setNews([...new Set([...news, ...response.data])]);
}
dailyNews();
//eslint-disable-next-line
}, [page])
Please please help me in adding infinite scroll to my page
I'm using "react-infinite-scroll-component" npm package

Answer 1

Use following format for all useEffect hook
useEffect(()=> {
...
//eslint-disable-next-line
},[])

Answer 2

You can put
// eslint-disable-next-line react-hooks/exhaustive-deps
before the violating line if there is a good reason.
Read react team member comment
Write useEffect like this
useEffect(() => {
const dailyNews = async () => {
const response = await getNews(page);
console.log(new Set([...news, ...response.data]));
setNews([...new Set([...news, ...response.data])]);
}
dailyNews();
// eslint-disable-next-line
}, [page])
or you can add missing dependencies there like this
useEffect(() => {
const dailyNews = async () => {
const response = await getNews(page);
console.log(new Set([...news, ...response.data]));
setNews([...new Set([...news, ...response.data])]);
}
dailyNews();
}, [page, news, setNews])