Programmatically change SPA URL without reload and what is state for?

WHAT THIS TESTS: This question checks if you know how modern single-page applications synchronize the browser URL with the current view without causing a full page reload. It also checks whether you understand the difference between merely changing the address bar and managing session history in a way that respects the back and forward buttons. Interviewers want to see that you have used the History API in practice and that you understand the lifecycle of the state object.

A GOOD ANSWER COVERS: First, name the two methods: history.pushState() creates a new history entry and updates the URL, while history.replaceState() mutates the current entry in place. Second, clarify that both methods accept three arguments: a state object, an unused title string, and a URL. Third, explain that the state object must be serializable and is attached to that specific history entry; when the user later navigates back or forward to that entry, the browser fires a popstate event whose event.state property contains the previously saved object. Fourth, note that these APIs do not cause a network request or page reload by themselves, so the application must manually fetch and render the new content.

COMMON WRONG ANSWERS: A major red flag is suggesting location.href, window.location.assign(), or window.location.replace(), because all of these trigger a full document load. Another mistake is confusing the state object with query parameters or the request payload; the state object is never sent to the server and lives purely in the browser's session history. Some candidates also forget to mention the popstate event, which makes it sound like they have not actually built back-button handling in an SPA.

LIKELY FOLLOW-UPS: An interviewer might ask how you would restore scroll position when a user presses the back button, or how you would guard against duplicate history entries when the same link is clicked twice. They might also ask about the security rule that the URL must be same-origin, or how you would polyfill or gracefully degrade for older browsers. Another common follow-up is asking how this approach compares to hash-based routing.

ONE CONCRETE EXAMPLE: Suppose a photo gallery SPA displays image one at a time. When the user clicks the next arrow, the app calls history.pushState({ imageId: 2 }, "", "/photos/2") and then fetches the new image via fetch(). If the user later clicks the browser back button, a popstate event fires with event.state equal to { imageId: 1 }, allowing the app to re-render the first image without any network round-trip for the HTML document itself.

Source: developer.mozilla.org