Automatically Scroll to Top of Page With React useLayoutEffect
We'll see how React's useLayoutEffect Hook can help have our application window be scrolled to the top when we navigate from page to page.
useLayoutEffect & Window Scroll#
If we were to navigate from page to page in our app, we'll notice that in certain cases the window scroll position of the page doesn't scroll to the top when we would expect it to.
Since our application is a client-side app, the server returns a single web-page at the beginning. When we navigate from route to route (i.e. page to page), the parent <App />
component simply determines which child component should be shown (e.g. <Host />
component is shown in the /host
route). When different child components get rendered as we move from page to page, the scroll position of the window can remain the same which can cause the issue of having the new page that is shown be in a scroll position close to the bottom of the page.
To avoid this, we can have an effect run whenever a section-level child component is rendered to scroll the window to the top of the page. To run an effect with DOM specific changes, we should use the useLayoutEffect
Hook from React. This is because the useLayoutEffect
Hook fires synchronously after all DOM mutations and thus should be used to read and/or change layout in the DOM.
We'll consolidate the effect we want to run within a custom effect we'll call useScrollToTop
. We'll create this custom effect in a /hooks
folder within the src/lib/
directory of our client application.
client
src/
lib/
// ...
hooks/
useScrollToTop/
index.ts
index.ts
// ...
// ...
In the src/lib/hooks/index.ts
file, we'll re-export the soon to be created useScrollToTop()
function.
export * from "./useScrollToTop";
In the src/lib/hooks/useScrollToTop/index.ts
file, we'll export and use the useLayoutEffect
Hook from React. In the effect callback, we'll use the window.scrollTo()
to scroll the user to the beginning of the webpage (i.e. to the 0
pixel position for the horizontal and vertical axes of the webpage).
import { useLayoutEffect } from "react";
export const useScrollToTop = () => {
useLayoutEffect(() => {
window.scrollTo(0, 0);
}, []);
};
In the separate section-level components, we can place the useScrollToTop()
function in the component to have the window scrolled to the top whenever these components are rendered.
This page is a preview of TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two