MikeGajdos

If you use server rendering, keep in mind that neither useLayoutEffect nor useEffect can run until the JavaScript is downloaded.

You might see a warning if you try to useLayoutEffect on the server. Here's two common ways to fix it.

Option 1: Convert to useEffect

If this effect isn't important for first render (i.e. if the UI still looks valid before it runs), then useEffect instead.

function MyComponent() {

	/**
	* useScroll React custom hook
	* Usage:
	* const { scrollX, scrollY, scrollDirection } = useScroll();
	*/

	import { useState, useEffect } from "react";

	export function useScroll() {
	const [lastScrollTop, setLastScrollTop] = useState(0);