Why store router on zustand if router is already available via useRouter?

[hems]

I'm curious about what's the advantage / goal of storing router on zustand if it's already available via useRouter ?

react-three-next/src/pages/_app.jsx

Lines 26 to 30 in 8648c93

	const router = useRouter()
	useEffect(() => {
	useStore.setState({ router })
	}, [router])

react-three-next/src/helpers/store.js

Line 5 in 8648c93

router: null,

react-three-next/src/components/canvas/Shader/Shader.jsx

Line 30 in 8648c93

const router = useStore((state) => state.router)

react-three-next/src/components/canvas/Box.jsx

Line 6 in 8648c93

const router = useStore((s) => s.router)

[marceloavf]

I'm trying to reproduce a bug here, and I'm thinking that it's because of it.

If I use the router directly from next seems to bug some interactions because of R3F.

[RenaudRohlinger]

Hello!

It is because context is lost through the reconciler. So we have to either way forward it through context bridge or via a state manager such as Zustand.

If that answers your question feel free to close this issue. Maybe we could add a small explanation in the readme

[hems]

If you just import "Router" directly instead of "useRouter" won't that fix the issues?

i.e.

import Router from 'next/router'

Router.whateverYouNeed

[emalorenzo]

Hello!

It is because context is lost through the reconciler. So we have to either way forward it through context bridge or via a state manager such as Zustand.

If that answers your question feel free to close this issue. Maybe we could add a small explanation in the readme

I need to reload the page to see the dom changes every time. Is this something related to that?

[RenaudRohlinger]

latest r3f fix this

[synztran]

If you just import "Router" directly instead of "useRouter" won't that fix the issues?

i.e.

import Router from 'next/router'

Router.whateverYouNeed

It works. useRouter cannot be used. But the Router works.