👨‍💼 We want the query to update as the query params change through a popstate event. Once you added the useEffect hook, you then have to prevent the default full refresh of the page when the user clicks the back/forward button.

🧝‍♂️ I added a new utility called setGlobalSearchParams which allows us to set the URL search params without triggering a full-page refresh. So whenever the user clicks "submit," we update the URL search params. The trouble is, when they hit the back button, the search doesn't stay synchronized with the URL (yet).

You can take a look at my changes for details on what I did.

👨‍💼 Thanks Kellie. So what we want you to do is make it so when the user hits the back button in their browser and the search params are updated, we update the input value.

The only way to be notified of a back/forward event is to listen for the popstate event. You can do this by adding an event listener to the window object.

window.addEventListener('popstate', () => {
	// update the input value
})

To test whether you got this right follow these steps:

That last step will be broken and that's what you should fix in this step.

One more thing, we're going to need to retrieve the query param in two places. Right now we get it to initialize our state, but we'll also want to get it when the popstate event fires. So you'll be extracting that logic to a small function and we'll pass that as a function to our useState (using the lazy initializer as before).

In our case the performance difference is so small it's not really worth it, but since we're making a function anyway, you can simply pass the function to useState directly:

// both of these work just fine:
const [query, setQuery] = useState(getQueryParam())
const [query, setQuery] = useState(getQueryParam)

You're going to be making the getQueryParam function. Got it? Great, let's go!