# useDeferredRegistrations

Register the modules deferred registration functions when the global data is initially fetched and update the deferred registration functions whenever the global data or the feature flags changes.

This hook should always be used in combination with deferred registrations.

# Reference

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

# Parameters

data: An optional 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 array of ModuleRegistrationError instances as argument.

# Returns

Nothing

# Usage

# Register or update deferred registrations with global data

If the deferred registration depends on remote data (and optionally on feature flags as well), the registrations must be registered and updated with a data object.

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

function BootstrappingRoute() {
    const [userInfo] = usePublicDataQueries([getUserInfoQuery]);

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

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

    useDeferredRegistrations(data);

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

    return <Outlet />;
}

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

# Register or update deferred registrations without global data

If the deferred registration only depends on feature flags, the deferred registrations can be registered or updated without providing a data object.

host/src/App.tsx
import { useDeferredRegistrations, useIsBootstrapping, AppRouter } from "@squide/firefly";
import { createBrowserRouter, Outlet } from "react-router";
import { RouterProvider } from "react-router/dom";

function BootstrappingRoute() {
    useDeferredRegistrations();

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

    return <Outlet />;
}

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

# Handle registration errors

host/src/App.tsx
import { useDeferredRegistrations, type DeferredRegistrationsErrorCallback } from "@squide/firefly";

function BootstrappingRoute() {
    const handleErrors: DeferredRegistrationsErrorCallback = errors => {
        errors.forEach(x => {
            console.error(x);
        });
    };

    useDeferredRegistrations(undefined, {
        onError: handleErrors
    });

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

    return <Outlet />;
}