Происходит бесконечный ререндер компонента react

При загрузке страницы в консоль выводится такая ошибка:

Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

at renderWithHooks (react-dom.development.js:16317:1)
at mountIndeterminateComponent (react-dom.development.js:20074:1)
at beginWork (react-dom.development.js:21587:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27451:1)
at performUnitOfWork (react-dom.development.js:26557:1)
at workLoopSync (react-dom.development.js:26466:1)
at renderRootSync (react-dom.development.js:26434:1)

И ещё одна:

The above error occurred in the component:

at Home (http://localhost:3000/static/js/bundle.js:1216:88)
at RenderedRoute (http://localhost:3000/static/js/bundle.js:51823:5)
at Routes (http://localhost:3000/static/js/bundle.js:52246:5)
at div
at App
at Router (http://localhost:3000/static/js/bundle.js:52184:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:50531:5)
at Provider (http://localhost:3000/static/js/bundle.js:47871:5)

Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

Вот проблемный файл Home.tsx:

import Search from "../components/Search";
import { useLazyGetAllPostsQuery } from "../store/blogApi/blog.api";
import {useEffect} from "react";
import { useAppSelector, useActions } from "../store";
import Preloader from "../components/Preloader";

export default function Home() {
    const [getAllPosts, {data: postsRes, isLoading}]= useLazyGetAllPostsQuery();
    const {searchQuery, allPosts} = useAppSelector(state => state.searchPosts);
    const {pushPosts, searchPosts} = useActions();
    getAllPosts();
    pushPosts(postsRes?.posts ?? []);


    return (
        <>
        {false ? <Preloader /> 
        : <div className="home">
            <Search />
        </div>
        }
        </>
    );
}

Если закомментировать useLazyGetAllPostsQuery() хук, то всё работает.

Ссылка на репозиторий проекта: https://github.com/Timurka666/blog


Ответы (0 шт):