Unable to use router.reload() on useEffect

[agustinzamar]

Version:

• @inertiajs/react version: 2.0.11

Describe the problem:

When using router.reload() inside a useEffect() I get Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'component')

Steps to reproduce:

My particular use case is a page with 2 tabs. I only want to load the data for the tab 1 initially so the props for the second tab are set as optional on the controller with Inertia::optional(). The problem arises when the user is on tab 2 and reloads the page, the data is not returned because it's not a partial reload specific asking for the optional data. In order to solve this I set up a useEffect to make a partial visit

useEffect(() => {
    router.reload({
        data: { tab: 'payments' },
        only: ['payments'],
        preserveState: true,
        preserveScroll: true,
        replace: true,
    });
}, []);

But this fails with Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'component')

If it is not a partial visit the error message is other Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'version')

Is there a better way to achieve my expected result? I dont use defer because the second tab data is heavy and dont want to fetch it unless the user explicitly access it

[agustinzamar]

As a workaround I was able to make it work by wrapping the router.reload on a seTimeout

useEffect(() => {
    const timer = setTimeout(() => {
        router.reload({
            data: { tab: 'payments' },
            only: ['payments'],
            preserveState: true,
            preserveScroll: true,
            replace: true,
        });
    }, 0);

    return () => clearTimeout(timer);
}, []);

[chack1172]

The issue is that when the useEffect() is called, the currentPage object is not initialized yet. This happens because the router init is called inside a useEffect itself and react runs effects bottoms up, so the inertia useEffect will be the last to be called:
https://github.com/inertiajs/inertia/blob/master/packages/react/src/App.ts#L29

[pascalbaljet]

Fixed in #2379