How to load data and trigger action in shared components rather than in routers?

[SteveSuv]

for example, SearchBar component will be used in different pages, i put it in app/components dir, but i can't use loader and action out of app/routers, what should i do?

[kiliman]

You can't. In Remix, loader and action are tied to routes, not individual components.

I recommend you consider the Full Stack Component pattern by @kentcdodds. Essentially you create a resource route (your API route) and export your UI component (SearchBar) from that route.

Then in each of the routes you want to use your SearchBar component, you import it and render. All the logic for calling the resource route is encapsulated in the component.

https://www.epicweb.dev/full-stack-components

[zipme]

This is nice, but it's not very clear how do the error handling. Say the resource loader errors out, is there a way we can show the error message directly in the component instead of rendering the route's error boundary?

[kiliman]

I wrote a <ComponentErrorBoundary> and some helpers to handle this. Your loaders will need to return a specific error response; otherwise, Remix will trigger the route error boundary.

The repo provides instructions and a sample app.

https://github.com/kiliman/remix-component-errorboundary

[amitkumarrchauhan]

I tried in current remix but somehow this full stack component pattern is not working anymore, when I import the exported component elase where it is not calling the loader at all.

I am using the latest version of remix.

[sergiodxa]

When using this pattern, the loader was never called when the component is mounted, it's only called when you use fetcher.load/fetcher.submit

The pattern is great for components that only load or submit data on user interaction, not for components that needs that data when it's mounted, for that do the data loading in the UI route rendering the component.