On reusable components

[RapidOwl]

One thing I don’t understand and haven’t found covered in the docs or examples is breaking your UI down into reusable components.

What happens if I want to create a route that renders multiple page elements, but not use nested routes (that create longer and longer URLs)?

I assume these can just be written like normal React components? Is it possible to use error boundaries around components? Can components use Remix Loaders? Will they be rendered server-side?

If they can’t use loaders, should I just load the data in the route and pass it into the component via props?

[ccssmnn]

One thing I don’t understand and haven’t found covered in the docs or examples is breaking your UI down into reusable components.

Creating reusable components in remix works like most other react applications. There is nothing too special about remix. It's built on react. That's why there is no remix specific component section in the docs.

What happens if I want to create a route that renders multiple page elements, but not use nested routes (that create longer and longer URLs)?

When you want navigation, you should consider routes. If not, you're free to put whatever react component you like on the route.

I assume these can just be written like normal React components? Is it possible to use error boundaries around components? Can components use Remix Loaders? Will they be rendered server-side?

Both CatchBoundaries and ErrorBoundaries are for routes. Catch Boundaries are for thrown responses from your actions or loaders. ErrorBoundaries are similar to reacts default error boundaries. They are a fallback if anything in your rendering goes wrong. For everything else, you can just use Reacts Error Boundaries.

If they can’t use loaders, should I just load the data in the route and pass it into the component via props?

Yes, that's something you have to do. With client-side data fetching, you could query data in any component, making them independent of the page and quite reusable, especially with swr. You could to that with Remix as well, but that only improves DX, not the UX. Remix is UX first. Loading all the data you need in the loader and rendering it instantly is way better for your users. And it will save you time by not needing to implement loading states and the like.

[RapidOwl]

Thanks for replying! That does clear things up.

[ccssmnn]

As with other technologies, especially when you're new, look at publicly available repositories that use them and try to get the spirit. Don't look for starters, look for bigger projects.

The Homepage from Kent C. Dodds is great as a reference.

[mbrowne]

If they can’t use loaders, should I just load the data in the route and pass it into the component via props?

Apparently someone has created a way to do this, based on the fact that remix allows you to write loader functions in the same files as your non-route components:
https://github.com/kiliman/remix-component-data

Whether or not that could be considered a "best practice" might be the subject of some debate, and might depend on the use case. In any case, it's important to understand that all loaders for a given route are run in parallel, and they don't have access to each other's data.