Application Crash with useRemember Hook During Browser History Navigation

[Hasan-Mir]

Version:

• @inertiajs/react version: 1.0.14

Describe the problem:

The application crashes when navigating through the browser history using the go back & go forward buttons if the useRemember hook is used on a page. If we are on a page that uses the useRemember hook, if we navigate to another page by entering the page’s URL in the address bar (i.e., a full page visit, not using Inertia’s Link component) and then click on the go back button next to the address bar, the application throws an error and displays a white screen:

This issue occurs with both Vite and Laravel-Mix. The only difference is that with Vite, the application doesn’t break and display a white screen.

I’ve created a repo to demonstrate this bug on the /login page. The repo has two branches: main for the Laravel-Mix version and vite-version for the Vite version.

export default function Login({ status, canResetPassword }) {
    const { data, setData, post, processing, errors, reset } = useForm({
        email: "",
        password: "",
        remember: false,
    });

    const [count, setCount] = useRemember(0, "count");

    // ...
}

There is no difference between providing a key (the second argument, in this case "count") to useRemember and not providing one at all.

Laravel-Mix version:

https://github.com/inertiajs/inertia/assets/62181905/2ac761c7-ee0f-429c-9e01-f87f11a04cf3

When debugging the app.jsx file, it can be observed that during the first render after navigating back to /login from /register, the name argument of the resolve function is Auth/Login. However, during the second render (which I don't know why Inertia renders the components twice!!!), the name argument is undefined, which causes the error.

https://github.com/inertiajs/inertia/assets/62181905/f5fb01db-c58f-46d4-98bb-5a2af4849185

Vite version:

https://github.com/inertiajs/inertia/assets/62181905/e38029de-7d09-4922-a4cb-8557d6b01b3c

The same issue occurs when debugging the app.jsx file in the Vite version.

https://github.com/inertiajs/inertia/assets/62181905/a950677a-d7cc-4cb5-9aa6-d50b21fbde7e

By the way, this bug doesn’t show up when you’re using the Vue version of Inertia.

Steps to reproduce:

1- Create an Inertia project. 2- Use the useRemember hook in a component 3- Visit the page that includes the component using the useRemember 4- Enter an arbitrary URL in the address bar (either within your own app or another website) and hit enter, now click on the go back button next to the address bar.

Alternatively, you can clone this repo, which has two branches: main for the Laravel-Mix version and vite-version for the Vite version.

[rick-nu]

@reinink could you take a look at the proposed PRs? We're running into this issue for our project, and the proposed PRs seem to fix the issue.

Thanks in advance!

[driesvints]

@rick-nu do you might know which of the PR's is a better solution?

[rick-nu]

@driesvints https://github.com/inertiajs/inertia/pull/1784 seems the complete fix :ok_hand:

[rick-nu]

We are now migrating away from useRemember because of this issue. We will be using useState instead. Less ideal but at least that doesn't break.