mrmilu / react.base

Mr Milú's official starter template for React.js projects.
5 stars 0 forks source link

Feature/9 react router data loading #10

Closed arnaugomez closed 1 year ago

arnaugomez commented 1 year ago

Closes #9 Data loading with React Router example.

Substituting Redux with React Router for data loading has the advantage of simplifying the logic of the app. However, I can see a few disadvantages:

Use React Router for timing of data loading, mutations, and navigation state, then use libraries like React Query for the actual implementation of loading, invalidating, storage, and caching.

Maybe this is the reason why the TypeScript integration is so poor. The maintainers want to encourage you to use React Query to store the loaded data.

In my opinion, a solution would be to combine React Router data fetching with Zustand. Inside the React Router loader, you call the Zustand function that loads the data, and store it inside the Zustand store. And the data is then accessed in the component with the Zustand hooks. This way, you don't have to use useEffect to fetch the data. Instead, you fetch the data inside the React Router loader.