[feature request] add "skipRender" option to push/replace without rendering immediately

[devtempmac]

similar feature: vercel/next.js#48110

is it possible to add a don't rerender flag to push() and replace() ?

eg:

routes
  .searchPage({ 
     ...routeParams, 
     name: newName,
  })
  .push({ skipRerender: true })

background: I have a form that requires url path updates whenever input values change:

<input
  value={formViewModel.name}
  onChange={(e) => {
    const name = e.currentTarget.value;
    formViewModel.setName(name)
    router.searchPage.push({ ...routeParams, name, }) // re-render triggered for `useRoute`
  }}
/>

and page-routing is done like this:

function PageRenderer() {
  const route = useRoute()
  if (route.name === 'searchPage') {
    const pageViewModel = new SearchPageViewModel(...);
    return <SearchPage vm={pageViewModel} />
  }
}

with current replace and push function, there's no option to prevent re-render on PageRender.
(note that it's possible to keep pageViewModel alive, but requires a lot of work)

[bradenhs]

Thanks for the suggestion! I'm inclined to not add this to Type Route itself right now but would be open to considering something to this effect if there's interest from others. Here's a potential work around you might consider using in the meantime:

Don't use the built in RouteProvider and useRoute function. Instead create your own version of RouteProvider and useRoute based off of the source code here: https://github.com/zilch/type-route/blob/main/src/react.ts. The React integration is pretty minimal. Then you'll have control over rendering and can add some conditional check to the session listener that only updates the route under conditions you specify (e.g. add an if statement to this line: https://github.com/zilch/type-route/blob/d1f9a3fe9727a5158bef70f2521c5d9b2676ab8d/src/react.ts#L78C38-L78C38). You could then add a base route which every other route extends that has a skipRender parameter which would allow you to optionally specify if the render should be skipped or not. Of if you're not inclined to do that some global variable called skippedNextRender could be set to true immediately before calling push or replace when you'd like to skip the render (and set to false when the render is skipped). I know this work around isn't the most elegant solution but it wouldn't be too hard to implement either. Again, I'd be open to adding something to this effect to Type Route if I see more interest.

[devtempmac]

hmm is it about changing push() / replace() function arguments?

if that is the case, would this be ok?:

router.skipNextRender()
router.routes.searchPage({ ...routeParams, keyword: 'hello1' }).replace()

adding conditions to
https://github.com/zilch/type-route/blob/d1f9a3fe9727a5158bef70f2521c5d9b2676ab8d/src/react.ts#L78C38-L78C38
seems a bit difficult to have a 100% control of when to skip next render.

// inside SearchPage
  ...
  resetForm() {
    // do a full re-render
    router.routes.searchPage({}).replace()
  }
  ...
  setKeyword(keyword: string) {
    // don't re-render
    router.routes.searchPage({ ...routeParams, keyword }).replace()
  }

// inside PromoPage
<Banner
  img={...}
  // should re-render
  onClick={routes.searchPage({ keyword: "some promotion" }).replace()}
/>

(or I have to add 'skipRender' flag to routeParam, which might mean a lot more work to get TS pass:

router
  .routes
  .searchPage({ ...routeParams, keyword: 'hello1', skipRender: true })
  .replace()