useReload

Provides logic to reload the page or refresh a component state programmatically.

Usage

The useReload hook is useful when you need to programmatically trigger a reload of a page or specific content. Below is a basic example to see how this hook works in reloading components or entire windows.

"use client";
import { Svg } from "@/ui/svg";
import { Button } from "@/ui/button";
import { useReload } from "@/hooks/use-reload";
import { useEffect, useState } from "react";

type DataItem = {
  userId: number;
  id: number;
  title: string;
};

function Demo() {
  const { key, onReload, loading, onLoading } = useReload();
  const [data, setData] = useState<DataItem[]>([]);

  useEffect(() => {
    async function fetchData() {
      onLoading(true);
      try {
        const res = await fetch("https://jsonplaceholder.typicode.com/albums/");
        const json = await res.json();
        setData(json);
      } finally {
        onLoading(false);
      }
    }
    fetchData();
  }, [key, onLoading]);

  return (
    <div>
      <Button title="reload" onClick={onReload} variant="outline" size="icon" color="default" className="p-1 [--sz:36px]">
        <Svg size={28} className="transition-transform">
          <g>
            <path d="m4,11c.6-4.4,4.7-7.5,9.1-6.9,2.8.4,5.3,2.3,6.4,4.9m.5-4v4h-4" />
            <path d="m20,13c-.6,4.4-4.7,7.5-9.1,6.9-2.8-.4-5.3-2.3-6.4-4.9m-.5,4v-4h4" />
          </g>
        </Svg>
        <span className="sr-only">Reload</span>
      </Button>

      {data?.length === 0 || loading ? (
        <div className="space-y-1.5">
          {/* Skeleton Row */}
          {[...Array(12)].map((_, index) => (
            <div key={index} className="flex animate-pulse space-x-1.5">
              <div className="h-10 w-11 bg-muted" />
              <div className="h-10 w-[23rem] bg-muted" />
            </div>
          ))}
        </div>
      ) : (
        <table className="w-full border">
          <thead>
            <tr>
              <th className="border p-2.5">ID</th>
              <th className="border p-2.5">Name</th>
            </tr>
          </thead>
          <tbody>
            {data.slice(0, 12).map(item => (
              <tr key={item.id}>
                <td className="h-[42px] w-11 border p-2">{item.id}</td>
                <td className="h-[42px] w-[22rem] truncate border p-2">{item.title}</td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  );
}

Hard Reload

In certain cases, you may need to perform a hard reload of the page to refresh all content or reset the state. This section shows how to use useReload for performing a hard reload on the window.

"use client";
import { Svg } from "@/ui/svg";
import { Button } from "@/ui/button";
import { useReload } from "@/hooks/use-reload";

export function UseReloadDemo() {
  const { loading, onReloadWindow } = useReload();

  return (
    <Button title="reload" onClick={onReloadWindow} variant="outline" size="icon" color={loading ? "red" : "default"} className="p-1 [--sz:36px]">
      <Svg size={28} className="transition-transform">
        <g className={loading ? "occure_load" : undefined}>
          <path d="m4,11c.6-4.4,4.7-7.5,9.1-6.9,2.8.4,5.3,2.3,6.4,4.9m.5-4v4h-4" />
          <path d="m20,13c-.6,4.4-4.7,7.5-9.1,6.9-2.8-.4-5.3-2.3-6.4-4.9m-.5,4v-4h4" />
        </g>
      </Svg>
      <span className="sr-only">Reload window</span>
    </Button>
  );
}

API References

mdn

useReload utilizes the location.reload() method to initialize the current URL's reload location, such as creating a Refresh button whose style and layout you create yourself.

Source Codes

Full working code example, including necessary markup and styles. You can copy and paste this code directly to start using the component immediately.

use-reload.ts