How to get rid of this infinite loop using useEffect and useCallback?

Question

I wanna load the first batch of comments immediately (using useEffect) and then load additional pages when a "load more" button is pressed.

The problem is that my current setup causes an infinite loop (caused by the dependency on comments).

If I remove the fetchNextCommentsPage function from the useEffect dependency list, everything seems to work, but EsLint complains about the missing dependency.

    const [comments, setComments] = useState<CommentModel[]>([]);
    const [commentsLoading, setCommentsLoading] = useState(true);
    const [commentsLoadingError, setCommentsLoadingError] = useState(false);

    const [paginationEnd, setPaginationEnd] = useState(false);

    const fetchNextCommentsPage = useCallback(async function () {
        try {
            setCommentsLoading(true);
            setCommentsLoadingError(false);
            const continueAfterId = comments[comments.length - 1]?._id;
            const response = await BlogApi.getCommentsForBlogPost(blogPostId, continueAfterId);
            setComments([...comments, ...response.comments]);
            setPaginationEnd(response.paginationEnd);
        } catch (error) {
            console.error(error);
            setCommentsLoadingError(true);
        } finally {
            setCommentsLoading(false);
        }
    }, [blogPostId, comments])

    useEffect(() => {
        fetchNextCommentsPage();
    }, [fetchNextCommentsPage]);

@aleEspinosaM Yes, that's what I started out with. Then EsLint lights up the whole function and warns that this will cause the useEffect to run on every render. — Florian Walther
– Florian Walther, Commented Feb 1, 2023 at 9:59

Đào Minh Hạt · Accepted Answer · 2023-02-01 10:02:20Z

2

Never put the state you want to mutate in the dependencies list as it will always raise an infinite loop issue. The common way to solve this is to use the callback function of setState https://reactjs.org/docs/react-component.html#setstate.

If you want your effect triggered only once, put something that never changes after the first loading. When you want to load more when pressing a button, just change the dependencies of your effect to run your effect again with new dependency value.

    const [comments, setComments] = useState<CommentModel[]>([]);
    const [commentsLoading, setCommentsLoading] = useState(true);
    const [commentsLoadingError, setCommentsLoadingError] = useState(false);
    const [continueAfterId, setContinueAfterId] = useState(null)

    const [paginationEnd, setPaginationEnd] = useState(false);

    const fetchNextCommentsPage = useCallback(async function () {
        try {
            setCommentsLoading(true);
            setCommentsLoadingError(false);
            const response = await BlogApi.getCommentsForBlogPost(blogPostId, continueAfterId);
            setComments(previousState => [...previousState, ...response.comments]);
            setPaginationEnd(response.paginationEnd);
        } catch (error) {
            console.error(error);
            setCommentsLoadingError(true);
        } finally {
            setCommentsLoading(false);
        }
    }, [blogPostId, continueAfterId]);

    useEffect(() => {
        fetchNextCommentsPage();
    }, [fetchNextCommentsPage]);

    const onButtonPressed = useCallback(() => {
        // continueAfterId is one of the dependencies of fetchNextCommentsPage so it will change `fetchNextCommentsPage`, hence trigger the effect
        setContinueAfterId(comments[comments.length - 1]?._id)
    }, [comments])

answered Feb 1, 2023 at 10:02

Đào Minh Hạt

2,92618 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Florian Walther Over a year ago

Thank you! This trigger the initial load twice. Any idea why? Maybe this only happens in debugging because of React's double render. Edit: I think the double fetch is caused by React's strict mode and should not happen in production.

Florian Walther Over a year ago

Also, what do you think about passing continueAfterId as an argument to fetchNextCommentspage and removing it from the dependency array of the useCallback? It feels more intuitive to me than using continueAfterId as a trigger.

Đào Minh Hạt Over a year ago

@FlorianWalther yes, you can absolutely do that so onButtonPress you will calcuate the next id and call the fetchComments(newId) again. It's an even better solution actually :D. Then you don't need another state for it.

Florian Walther Over a year ago

Do you want to edit your solution or should I post my approach myself?

Florian Walther · Accepted Answer · 2023-02-01 14:27:17Z

Thank you to @Đào-minh-hạt for their answer. I improved it by passing the continueAfterId as an argument, rather than holding it in another state (which, I think, is more intuitive):

const [comments, setComments] = useState<CommentModel[]>([]);
const [commentsLoading, setCommentsLoading] = useState(true);
const [commentsLoadingError, setCommentsLoadingError] = useState(false);

const [paginationEnd, setPaginationEnd] = useState(false);

const fetchNextCommentsPage = useCallback(async function (continueAfterId?: string) {
    try {
        setCommentsLoading(true);
        setCommentsLoadingError(false);
        const response = await BlogApi.getCommentsForBlogPost(blogPostId, continueAfterId);
        setComments(existingComments => [...existingComments, ...response.comments]);
        setPaginationEnd(response.paginationEnd);
    } catch (error) {
        console.error(error);
        setCommentsLoadingError(true);
    } finally {
        setCommentsLoading(false);
    }
}, [blogPostId]);

useEffect(() => {
    fetchNextCommentsPage();
}, [fetchNextCommentsPage]);

And then in my load-more button's onClick:

<Button
   variant="outline-primary"
   onClick={() => fetchNextCommentsPage(comments[comments.length - 1]?._id)}>
    Load more comments
</Button>

Collectives™ on Stack Overflow

How to get rid of this infinite loop using useEffect and useCallback?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related