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

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 <a href={article.link} target='_blank' rel="noreferrer">{article.publisher}</a>
                        </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

reactjs mern

Solution 1:^[1]

Use following format for all useEffect hook

useEffect(()=> {
...
//eslint-disable-next-line
},[])

Solution 2:^[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])

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Jay Patel
Solution 2

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

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]