What’s the best way to redirect on page load in remix? Isn’t my code below bad or calling unnecessarily?

My base route on my website always starts with /orderId. I have a navigation menu labeled “products”. On that “products” page, there is another menu navbar containing /orderId/products/local and /orderId/products/global. When I navigate to the “products” page, I want to be immediately redirected to /orderId/products/local.

import { type LoaderFunctionArgs, redirect } from "@remix-run/node";
import { Outlet, useLocation } from "@remix-run/react";
import OrderLink from "~/components/order-link";
import { Tabs, TabsList, TabsTrigger } from "~/components/ui/tabs";

export const loader = async ({ request, params }: LoaderFunctionArgs) => {
    const orderId = params["order-id"];
    const url = new URL(request.url);
    const pathname = url.pathname;

    if (pathname === `/${orderId}/products` || pathname === `/${orderId}`) {
        return redirect(`/${orderId}/products/local`);
    }

    return null;
};

export default function Products() {
    const location = useLocation();
    const tabValue = location.pathname.includes("/local") ? "local" : "global";

    return (
        <div>
            <div className="flex items-center justify-between w-full mb-10">
                <span className="text-xl font-semibold">Products</span>
            </div>
            <Tabs value={tabValue}>
                <TabsList className="rounded-lg w-fit">
                    <TabsTrigger asChild value="global">
                        <OrderLink to="/products/global">Global</OrderLink>
                    </TabsTrigger>
                    <TabsTrigger asChild value="local">
                        <OrderLink to="/products/local">Local</OrderLink>
                    </TabsTrigger>
                </TabsList>
                <Outlet />
            </Tabs>
        </div>
    );
}