[Next.js]スクロール量に応じた要素移動を軽量に行う

Question

Next.jsでスクロール量に応じた要素移動を行おうとしたところ、以下のコードで実装はできたのですが、処理が重すぎるため、何か軽量化する方法はないでしょうか。ご教授よろしくお願いいたします。PCだと普通に動きますが、スマホだと本当にカクカクになってしまいます。

throttleと呼ばれるものも試したのですが、うまく動作させられてないのか、効果はほとんどありませんでした。というか、間引きすぎても飛び飛びの移動になってしまうため、あまり間引けてないというのもあるかもしれません。あと、will-changeは指定してます。

useEffect(() => {
	resize()
	window.onresize = resize;
	return () => window.removeEventListener("scroll", resize);
});
function resize() {
	window.removeEventListener("scroll", resize);
	let boxElm = document.querySelector("#box_") as HTMLElement;
	let bodyHeight = document.documentElement.scrollHeight;
	let boxHeight = boxElm.offsetHeight;
	onscroll();
	window.onscroll = onscroll;
	function onscroll() {
		let scrollRate = document.documentElement.scrollTop / bodyHeight;
		let position = -1 * scrollRate * boxHeight;
		boxElm.style.transform = `translate3d(0, ${position}px, 0)`;
	}
}

カクツキ感はGIFでは表現できなかったため、動作の様子です。

Answer 1

直接的な原因かはわかりませんが、useEffectの第二引数が指定されていないのが気になりました。第二引数が指定されていない場合、useEffect内の処理がレンダーごとに毎回呼ばれてしまいます。

今回のケースでは、useEffect内で他のstateを利用していることはないので、空配列を指定すれば良いかと思います。空配列を指定すると、初回のみ呼び出されます。（厳密には複数回呼び出される場合もあります）

https://qiita.com/k-penguin-sato/items/9373d87c57da3b74a9e6