Managing Loader Data for Submenus in Layout with Remix

[axbegue]

Hello,

I'm working with Remix to develop an application that includes a layout with a main menu. My goal is to dynamically load submenu items based on the route a user selects from the main menu. I'm using a NavLink component for menu items, and a loader function to check the current URL pathname. Based on this pathname, the loader determines if the selected menu item has an associated submenu and sends this data back to the client component to render it.

However, I've encountered a problem where the layout component only re-renders under two specific conditions: either when a user clicks the same navigation URL again or when the browser is reloaded. If the user navigates to a different route via the menu, the layout does not re-render, and consequently, the submenu does not update based on the loader's data for the new route.

I understand that I might be able to manage this scenario with a function triggered by the NavLink to force a re-render, but I'm seeking a more straightforward way to handle this within Remix's architecture.

I'm looking for guidance on how to properly manage this scenario in Remix. Specifically, I'd like to understand:

1. How can I ensure that the layout component re-renders and updates the submenu whenever a user navigates to a new route within the menu?
2. Is there a recommended pattern in Remix for dynamically loading and displaying submenu items based on the current route, especially when these menus are part of a shared layout component?
3. Any advice, examples, or references to documentation would be greatly appreciated.

Thank you!

[kiliman]

By default, Remix will only call parent loaders if the new route is not a child route. That is, common ancestors like root and parent layout are not called again since Remix already has the data in context. Mutations will trigger Remix to revalidate all active loaders.

Since clicking a menu isn't a mutation, and if you're navigating to a sibling route, then the parent loader is not fetched again. This is where you can force Remix to revalidate imperatively via the useRevalidator hook. This returns an object with a revalidate function that will call all your loaders as if the user has navigated to a new route.

https://remix.run/docs/en/main/hooks/use-revalidator

[axbegue]

Thank you for your suggestion. I understand that by default, Remix optimizes data fetching by not recalling loaders for parent or common ancestor routes when navigating to a child or sibling route, unless there's a mutation that triggers a revalidation of all active loaders.

Your mention of the useRevalidator hook and its revalidate function presents an interesting approach, potentially allowing us to force Remix to fetch loaders as if navigating to a new route. However, implementing useRevalidator on every navigation action throughout the app seems impractical and could lead to redundant code, especially in a large application with extensive navigation not only from the layout menu.

I've been considering an alternative approach using useNavigation alongside useEffect to detect route changes and manage state updates accordingly. This method could potentially address the submenu updating issue without needing to imperatively revalidate loaders across the entire app.

However, I'm curious if there's a more idiomatic or streamlined way within Remix to handle this scenario. Specifically, I'm looking for a solution that aligns with Remix's architecture and design principles, ideally minimizing manual interventions and leveraging Remix's built-in mechanisms for data fetching and state management.

Does Remix offer a more elegant solution for dynamically updating data in response to navigation actions, especially for cases like submenu loading in a shared layout component?

[kiliman]

Hmm.. I'm not sure about idiomatic. However, Remix plans to support Single Data Fetch for loaders. There's an RFC. Essentially, instead of making multiple requests for loaders on navigation, there would be a single fetch, and Remix would call all loaders for the new route (again in parallel). This is the same as the initial document fetch. That means there would be no difference between initial and subsequent navigations.

Single Data Fetch RFC #7640

As for an existing solution, you don't have to add this code everywhere, just in your parent component. Here's a custom hook that will call revalidate() on navigation changes.

function useRevalidateOnNavigation() {
  const location = useLocation();
  const [pathname, setPathname] = useState(location.pathname);
  const revalidator = useRevalidator();
  useEffect(() => {
    if (pathname !== location.pathname) {
      setPathname(location.pathname);
      revalidator.revalidate();
    }
  }, [pathname, location.pathname, revalidator]);
}

[kiliman]

BTW, you can also look into Client Loaders if you want to cache the menu data locally so you can save a server fetch.

https://remix.run/docs/en/main/route/client-loader