# useDeferredRegistrations

Register the modules deferred registration functions when the global data is initially fetched or update the deferred registration functions whenever the global data change.

This hook should always be used in combination with deferred registration functions and with either the usePublicDataQueries hook or the useProtectedDataQueries hook (can be both).

# Reference

useDeferredRegistrations(data: {}, options?: { onError? });

# Parameters

data: An object literal of data that will be passed to the deferred registration functions.
options: An optional object literal of options:
- onError: An optional function receiving an DeferredRegistrationsErrorsObject object as an argument.

# `DeferredRegistrationsErrorsObject`

localModuleErrors: An array of errors that occured during the deferred registrations of local modules.
- error: The original Error object.
remoteModuleErrors: An array of errors that occured during the deferred registrations of remote modules.
- remoteName: The name of the remote module that failed to load.
- moduleName: The name of the module that Squide attempted to recover.
- error: The original Error object.

# Returns

Nothing

# Usage

# Register or update deferred registrations

host/src/AppRouter.tsx
import { usePublicDataQueries, useProtectedDataQueries, useDeferredRegistrations, useIsBootstrapping, AppRouter as FireflyAppRouter } from "@squide/firefly";
import { useMemo } from "react";
import { RouterProvider, createBrowserRouter, Outlet } from "react-router-dom";
import { DeferredRegistrationData } from "@sample/shared";
import { getFeatureFlagsQuery } from "./getFeatureFlagsQuery.ts";
import { getSessionQuery } from "./getSessionQuery.ts";
import { isApiError } from "./isApiError.ts";

function BootstrappingRoute() {
    const [featureFlags] = usePublicDataQueries([getFeatureFlagsQuery]);

    const [session] = useProtectedDataQueries(
        [getSessionQuery],
        error => isApiError(error) && error.status === 401
    );

    const data: DeferredRegistrationData = useMemo(() => ({
        featureFlags,
        session
    }), [featureFlags, session]);

    useDeferredRegistrations(data);

    if (useIsBootstrapping()) {
        return <div>Loading...</div>;
    }

    return <Outlet />;
}

export function AppRouter() {
    return (
        <FireflyAppRouter waitForMsw={false}>
            {({ rootRoute, registeredRoutes, routerProviderProps }) => {
                return (
                    <RouterProvider
                        router={createBrowserRouter([
                            {
                                element: rootRoute,
                                children: [
                                    {
                                        element: <BootstrappingRoute />,
                                        children: registeredRoutes
                                    }
                                ]
                            }
                        ])}
                        {...routerProviderProps}
                    />
                );
            }}
        </FireflyAppRouter>
    );
}

# Handle registration errors

host/src/AppRouter.tsx
import { useDeferredRegistrations, type DeferredRegistrationsErrorCallback } from "@squide/firefly";
import type { DeferredRegistrationData } from "@sample/shared";
import { useMemo } from "react";

function BootstrappingRoute() {
    const [featureFlags] = usePublicDataQueries([getFeatureFlagsQuery]);

    const data: DeferredRegistrationData = useMemo(() => ({ featureFlags }), [featureFlags]);

    const handleErrors: DeferredRegistrationsErrorCallback = ({ localModuleErrors, remoteModuleErrors }) => {
        localModuleErrors.forEach(x => {
            console.error(x);
        });

        remoteModuleErrors.forEach(x => {
            console.error(x);
        });
    };

    useDeferredRegistrations(data, {
        onError: handleErrors
    });

    if (useIsBootstrapping()) {
        return <div>Loading...</div>;
    }

    return <Outlet />;
}