[Doubt] Proper usage of Root clientLoaders

[ahmed-revv]

I am using react router v7 in SPA mode (ssr: false).

Highlevel details of my project

• My project mostly depends on two states, lets call it s1 and s2. So, I was planning to include these states as part of the route itself. So, it would be something like /home/s1/s2.
• These states s1 and s2 need to fetched from the backend after login or during first load (if already logged in).

Question

Currently, I am fetching these states in the home clientLoader and redirecting to /home/s1/s2 again. This works for my use case but doesn't seem like a good practice to me.

Here is my current home clientLoader code:

export async function clientLoader({ params }: Route.ClientLoaderArgs) {
  const token = getAuthToken();
  if (token === null) {
    return redirect("/login");
  }

  if (params.s1 !== undefined && params.s2 !== undefined) {
    // fetch the required data and return
  }

  if (params.s1 === undefined) {
    const s1 = getS1FromBackend();
    const s2 = getS2FromBackend();

    if (s1 === 0) {
      return redirect("/otherpage");
    }
    return redirect(`/home/s1/s2`);
  } 

I was wondering if this needs to be done on the root clientLoader. If so, can someone please suggest or guide me on what is the proper setup for project requirement ?

Also, lets say user is visiting /somepath and root clientLoader runs. Will root clientLoader run again in the below cases ?

• when user navigates to /diffpath
• when user navigates to /somepath/p1

I am asking this because I don't want to recompute s1 and s2 again and again.

---

Apologies if my question is very basic. I am new to react router v7 and trying to understand the ideal usage (there doesn't seem to be lot of resources).