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;

Please please help me in adding infinite scroll to my page I'm using "react-infinite-scroll-component" npm package

CodePudding user response：

Use following format for all useEffect hook

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

CodePudding user response：

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])