Saving Scroll Position with React Query on Route Change

Demonstrate how to capture and save the current scroll position of a page using React Query's cache when the user navigates to a different route.
import { useQueryClient } from 'react-query';
import { useHistory } from 'react-router-dom';
Imports necessary hooks from react-query and react-router-dom.
const useSaveScrollPosition = (key) => {
  const queryClient = useQueryClient();
  const history = useHistory();

  useEffect(() => {
    const saveScrollPosition = () => {
      const scrollPosition = window.scrollY;
      // Saving the scroll position to the React Query's cache
      queryClient.setQueryData(key, scrollPosition);

    // Saving the scroll position before route changes

    return () => {
      // Cleanup listener
  }, [key, queryClient, history]);
Defines a custom hook to save the scroll position using React Query's cache when the route changes.
const useRestoreScrollPosition = (key) => {
  const queryClient = useQueryClient();

  useEffect(() => {
    const scrollPosition = queryClient.getQueryData(key);
    if (scrollPosition) {
      // Restoring the scroll position from the React Query's cache
      window.scrollTo(0, scrollPosition);
  }, [key, queryClient]);
Defines a custom hook to restore the scroll position using the saved position from React Query's cache when a component mounts.
Usage of the custom hooks within a component to save and restore scroll position on that particular route. Note: Replace 'unique-key-for-route' with a key specific to your route.