inertia icon indicating copy to clipboard operation
inertia copied to clipboard

History back shouldn't trigger full rerender if Inertia's state didn't change

Open artygrand opened this issue 1 year ago • 2 comments

Version:

  • @inertiajs/react version: 1.0.15

Describe the problem:

Currently I rewrite my modal manager from react-router, where everything works fine. I use history to change private state, and Inertia rerenders whole page, even I didn't change its state

Steps to reproduce:

When I open modal I call history.pushState({...history.state, modal: modal.id}, ''); hence I keep all Inertia data. Later, when I click browser back button or call history.go(-1) I close modal on POP event.

But with this action, current page fully rerenders all components and of cource triggers useEffect(() => {}, []) Thankfully, it's coming at least without calling to backend.

Thank you!

artygrand avatar Mar 08 '24 07:03 artygrand

Inertia has history-based state management built in. You'll probably have better luck using that system instead of building your own.

https://inertiajs.com/remembering-state#manually-saving-state

shengslogar avatar Mar 11 '24 20:03 shengslogar

@shengslogar, problem not with data storing, but with returning back without side effect. router.remember(data, 'my-key') is replaces state, not pushes new, as I just tested. I can't return back to same page with it

artygrand avatar Mar 12 '24 02:03 artygrand

Hey! Manually using history.pushState is not currently supported with Inertia.js.

That said I hope to eventually add the ability to make client-side only visits using an API like Inertia.push().

My recommendation right now would be to use Inertia props to open/close a dialog like this. Yes that means hitting the server, but, at least at this time, that's the "Inertia way" 👍

reinink avatar May 28 '24 11:05 reinink

Thanks for giving us hope for client-side visits. This feature will fix more problems, such as compatibility with use-query-params

artygrand avatar May 28 '24 12:05 artygrand