darkroomengineering/react-lenis

useLenis - page gets stuck in hard reload loop when trying to use lenis.stop()

dash-james opened this issue · 2 comments

dash-james commented

When using the ReactLenis component (in a Layout component) as well as useLenis (in a component), the page keeps reloading.

I'm using a useEffect hook like so:

useEffect(()=> {
	if (window != undefined) {
		if (lenis) lenis.stop()
	}
}, [lenis])

I can't seem to replicate on a codesandbox link, but here it is anyways - maybe I'm doing something else wrong trying to manually stop and start it? Maybe its because I'm hot-reloading in dev mode?
https://codesandbox.io/p/sandbox/pedantic-shaw-mtygnd?file=%2Fcomponents%2FPreloader.js

clementroche commented

not related but if (window != undefined) is not necessary since useEffect only run on client side

Well it's gonna be hard to fix if we can't reproduce it, we've never experienced such issue

dash-james commented

I've removed that piece now, sometimes I use it to access the DOM without using a million refs.

Is that the correct way to stop the Lenis instance when a component loads? or should I rather include it in the Layout component? As right now it does not even stop the instance?

Seems to work sometimes, sometimes get stuck in a reload loop - not sure why it would need to reload
Here is the error I keep getting:
warn - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload