📌 Remix: Loader + Action + UI Update (Flow)

---

1. Loader

• Runs on GET requests.

• Provides data to the component through useLoaderData().

2. Action

• Runs on POST/PUT/DELETE/PATCH.

• Handles mutations (form submissions, API calls).

• Returns response (redirect, data, or error).

---

🔄 Internal Flow (Submit → UI Update)

1. User submits form
   → Browser sends request with method = POST (or PUT, etc).

2. Remix calls action of that route
   → Code inside action mutates data (DB, API, etc).
   → action returns either:

   • redirect("/path") → navigates + runs target route’s loader.

   • JSON/data → stays on the same route.

3. After action finishes
   → Remix automatically revalidates loaders.

   • If same route: re-runs that route’s loader.

   • If redirect: runs the loader of the target route.

4. Loader returns fresh data
   → Passed to the component via useLoaderData().

5. React re-renders with new data
   → ✅ UI updates without page reload.

---

3. Special Cases

• useFetcher.submit → triggers action without full navigation, then only revalidates necessary loaders.

• shouldRevalidate → lets you skip revalidation if you don’t want loader to run.

• If loader returns same data → UI looks unchanged (but it still ran).

---

🔑 Key Idea

• Action = mutate data

• Loader = fetch fresh data

• Remix stitches them together → UI syncs automatically after submission.

---