DEV Community

Алексей Шиманович
Алексей Шиманович

Posted on

setState in useEffect loops the application

Why am I getting infinite loop error? React refers to the line marked with *:

function Blog() {
    const [blog, setBlog] = useState({});
    const query = useQuery();

    async function takeBlog(query) {
        const _data = await (await fetch(`${root}/api/blog/${query}`)).json();
        console.log(_data.blog)
        setBlog(_.get(_data, 'blog', {}));  // *
    }

    useEffect(() => {
        takeBlog(query);
    }, []);

    return (
        <div className="blog_page">
            <div className="container">
                <div className="top">
                </div>
                <div className="other ab">
                    <div className="left">
                        <Navbar active='blogs' />
                    </div>
                    <div className="right">
                        <Posts posts={_.get(blog, 'articles', [])} />
                    </div>
                </div>
            </div>
        </div>
    );
}
Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
matthewmcp profile image
Matt McParland • Edited

You could try moving takeBlog() inside the useEffect

useEffect(() => {
async function takeBlog(query) {
const data = await (await fetch(${root}/api/blog/${query})).json();
console.log(_data.blog)
setBlog(
.get(_data, 'blog', {})); // *
}
takeBlog(query);
}, []);

This shouldn't be an issue due to the dependancy array being empty but could be worth trying.

I'd also change the setBlog line as I'm not sure what effect lodash will have in setState. I'd do something like
const articles =_.get(_data, 'blog.articles', {});
setBlog(articles)

and of course change what you pass to Posts. Hope this helps

stackoverflow.com/questions/533323...

Collapse
 
tkdodo profile image
Dominik D

use react-query and you won't have that problem:

react-query.tanstack.com/