Can you use loader/action functions inside any component? or can you only use them in routes?

[woeful marlin]

just a quick question

[oblique jungle]

Sort of depends on what you mean by use.

You can't call the loader or action function directly from anywhere. Remix calls it in response to the requests that are received and then makes the data available through various hooks.

Those hooks can be called from anywhere, routes or components, however what data these hooks return will depend on where they are rendered inside the routing tree.

So, for example, you can useLoaderData() anywhere, but the data that you receive will always be for the route that is rendering the current component.

There is also useRouteLoaderData, which allows you to specify the routeId. So if you are in a child route and want to access the loader data from one of the parents, you can specify the parents routeId and it's data will be returned. This will return null if the specified routeId is not in the current route heirarchy.

There is also useFetcher, which can be provided any path, and it will receive the loader data for that path, regardless of whether it is in the current route heirarchy.