Should I use React Router v6 Form component with their 'loaders' and 'actions'

Hello everyone, please am new to the forum so forgive me if i break any rule.
Now my question is concerning the React Router Library v6 where they introduced things like the Form component, loaders and actions. So I really know whether you guys use their approach i.e instead of using the useEffect hook to fetch data, you use the ‘loaders’ and instead of controlling input components and then preventing the browser default action on submission and sending the data to the server, you use their ‘action’.

I haven’t really use React router as of late (mainly use frameworks/file based routing) and it has also been a while since I tried Remix.

The patterns make sense, and I’m sure they have some benefits. It does create a bit of indirection, but it might just be a matter of adjusting to the new pattern.

If you can use server components to do the fetching and form actions server side, that might be a better idea. But then you are kind of stuck with using Next.js (well not really, but you know).

1 Like

Ok, Thanks for the response. I am actually very new to routing and am just trying to do some practice. Basically am trying to build a ‘countries-explorer’ app, where I’ll fetch the data from the rest-counteies api and then display them as ‘cards’ which should actually be a link to a page that show more details about the country. So in this case, how should I go about fetching the data, using a useEffect or using react-router’s loaders???

Also this app should have a search and filter functionality, should I then using react-router’s ‘Form’ component together with actions or just doing it the react way???

I would try the loader pattern.

Take a look at the tutorial they have, it goes over data fetching and searching/filtering.