Passing data to loader when calling useLoaderData

[filiplikavcan]

export const loader: LoaderFunction = async ({ data }) => {
    return json({
        number: data.number + 1
    })
}

export default function () {
    const data = useLoaderData<{ number: number }>({ number: 1 });

    return <div>{data.number} should be 2.</div>;
}

This would allow to do things like useLoaderData(useOutletContext()) - that is to parametrize loader not only with the request but also with the outlet context.

[sergiodxa]

The only way to pass parameters to the loader function is through the URL.

Also useLoaderData doesn't do the fetch itself, the data is fetched outside React and stored in a context, the hook only access that context.

This is the actual code of the hook, as you can see it's just a single line:

remix/packages/remix-react/components.tsx

Lines 1416 to 1418 in f4d6ff6

	export function useLoaderData<T = AppData>(): UseDataFunctionReturn<T> {
	return useRemixRouteContext().data;
	}

So it wouldn't be possible to pass parameters to the loader this way.

[filiplikavcan]

OK, I understand. Thank you for explanation.

[ttnbtfy]

Hi @filiplikavcan how did you do that?