Learn Inertia
This episode is for members only

Sign up to access "Learn Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
24. Remembering form state

Episodes

0%
Your progress
  • Total: 2h 20m
  • Played: 0m
  • Remaining: 2h 20m
Join or sign in to track your progress

Transcript

00:00
So we're going to hop back over to our form now and speak about something I think is really important that might catch you out when you are building out particularly forms. So if I go ahead and start to type a message into here and then I redirect over to another page, let's see what happens when we navigate back in the browser.
00:18
You can see that that message has been lost. Now, in a normal non-single page application, what would actually happen was that form state would be preserved inside of that text area. However, in our case, it's not because remember when we click through to a page,
00:35
we're making a separate request to re-render a component, pulling down new data. When we go back, it's just going back to the page that we were on and all of that state is lost. So if you find yourself having the same issue with forms, here's how we go and fix that. So let's open up index.view and let's go to where we are creating our form just here.
00:59
Inertia does come with another composable called use remember. I'd recommend going ahead and checking the docs on that. It's not something you'll use very often, but this is a very, very similar concept. It's just the ability to keep state within something.
01:16
Now, for the form helper, what we can actually do is pass a key through as the first argument and then the data as the second argument. And the key can be pretty much anything you want here. So for example, this could be store comment.
01:30
You could say store.comment. However you want to structure the keys to remember this data. But what this is going to do is it's going to preserve the state of your form between inertia routing requests.
01:43
So let's go ahead and type something out in here again. Hello there. I'm going to go ahead and click through to another page and then I'm going to go ahead and click back.
01:51
And sure enough, as if by magic, you can see that our form state has been preserved. So that's just a really small thing, but something that you need to add in if you want the same behavior as a standard app. And inertia clearly makes this incredibly easy to make this work.

Episode summary

In this episode, we dive into an easy-to-miss (but super frustrating) issue when working with forms in single page applications, especially when using Inertia.js. We notice that if you start typing into a form and navigate away, your input vanishes when you come back—unlike typical, non-SPA websites where the browser remembers your form contents.

We walk through why this happens: because each page change in Inertia is actually a request that completely re-renders the page component, wiping out the local form state. It’s a bit of a bummer for users who accidentally leave the page and lose what they wrote.

The good news? Inertia ships with some handy tools for remembering state, especially the useRemember composable. In particular, we update our form code to use a key when initializing the form helper, which tells Inertia to hang on to our form data between page changes. This means when you come back to the page, your carefully crafted message is still right where you left it.

We finish by showing this in action: typing in the form, navigating away, and coming back to see the message preserved—just like magic! It's a simple tweak that brings back a more standard app feel, and shows how easily Inertia can help smooth out the rough edges of building SPAs.

Episode discussion

No comments, yet. Be the first!