0

Here is my react component I have problem with

const Partners = () => {
    const { allPartners } = useLoaderData();
    const { store } = useContext(Context);
    const navigate = useNavigate();

    const {
        setPage, setLimit, page, limit,
    } = store;

    const [searchParams, setSearchParams] = useSearchParams();

    useEffect(() => {
        setPage(searchParams.get('page') || 1);
        setLimit(searchParams.get('limit') || 10);
    }, []);

    useEffect(() => {
        setSearchParams({
            page,
            limit,
        });
    }, [page, limit]);

    const addBtnHandler = () => {
        navigate('new_partner');
    };

    console.log('render');


    return (
        <div className='page'>
            <Filters />
            <Suspense fallback={<Loader />}>
                <Await resolve={allPartners}>
                    <PartnersTable />
                    <Pagination />
                    <Button children={'Додати'} onclick={addBtnHandler} />
                    <Outlet />
                </Await>
            </Suspense>
        </div>
    );
};

export default observer(Partners);

The problem is that I got two excessive renders while this code work(see attached screenshot) I have found that these two excessive renders caused by working with query parameters in the URL and I am wondering if there are any ways to reduce numbers of renders but save all the functionality of this component

I want to reduce number of renders to minimum. I appreciate any helpscreenshot of console

Victor
  • 1
  • 1
  • see https://stackoverflow.com/questions/61254372/my-react-component-is-rendering-twice-because-of-strict-mode – Lin Du Jul 11 '23 at 02:47

1 Answers1

0

I think the problem comes with the second useEffect hook in your code. Check if you have React.StrictMode active in your index.tsx (your main file, where the App component is rendered). By default, React renders components twice in strict mode, since this could really happen in production (because of bad connection or bugs). It is generally recommended to have strict mode on, but know that this is only for development.

Alexxino
  • 557
  • 2
  • 16