Improve TypeScript inference for common action pattern

packages/remix-react/__tests__/hook-types-test.tsx

@@ -1,4 +1,9 @@
+import * as React from "react";
+import type { ActionArgs } from "@remix-run/node";
+import { json, redirect } from "@remix-run/node";
+
 import type { TypedResponse, UseDataFunctionReturn } from "../components";
+import { useActionData } from "../components";
 
 function isEqual<A, B>(
   arg: A extends B ? (B extends A ? true : false) : false
@@ -111,3 +116,35 @@ describe("type serializer", () => {
     isEqual<response, { arg1: string; arg2?: number }>(true);
   });
 });
+
+describe("actual usage", () => {
+  it("should support typical action usage", () => {
+    async function action({ request }: ActionArgs) {
+      let formData = await request.formData();
+      let email = formData.get("email");
+      let password = formData.get("password");
+      if (typeof email !== "string" || !email) {
+        return json({ errors: { email: "Email is required" } });
+      }
+      if (typeof password !== "string" || !password) {
+        return json({ errors: { password: "Password is required" } });
+      }
+      return redirect("/hooray");
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    function Component() {
+      let actionData = useActionData<typeof action>();
+
+      React.useEffect(() => {
+        if (actionData?.errors?.email) {
+          // focus email
+        } else if (actionData?.errors?.password) {
+          // focus password
+        }
+      }, [actionData]);
+
+      return <div>UI</div>;
+    }
+  });
+});

packages/remix-react/package.json

@@ -21,6 +21,7 @@
     "type-fest": "^2.17.0"
   },
   "devDependencies": {
+    "@remix-run/node": "1.6.6-pre.1",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
     "abort-controller": "^3.0.0",