Probably shouldn't use generics for useLoaderData/useActionData

We’ve kinda encouraged something I think is probably not the best thing to be doing:

interface User {
  id: string;
  profile: {
    name: string;
  }
}

export let loader: LoaderFunction = () => {
  return { id: 123, email: "[e-mail]" }
}

export default function Comp() {
  let user = useLoaderData<User>();
  // error!
  return <div>{user.profile.name}</div>;
}

Just because you passed useLoaderData a generic doesn’t mean you will actually get a user.

The safest thing to do here is use a type guard so that the type system and the runtime do the right thing.

function isUser(user: any): user is User {
  // of course you can be as thorough as you want here
  return user.id && user.profile && user.profile.name;
}

export default function Comp() {
  let user = useLoaderData();
  if (!isUser(user)) {
    return <div>We got an unexpected thing from the server ...</div>
  }

  // TS now knows this is a real user, without the `useLoaderData` generic.
  return <div>{user.profile.name}</div>;
}

Do we want to keep this convenience with the current type-system-is-lying-to-you tradeoff?

[sergiodxa]

I would prefer the generic here, is my way to tell TS that function returns something I know, and if for some reason the server returns anything else that should throw a 500 status and render my error boundary component anyway

[mjackson]

I think we definitely want a generic here. As cool as typescript is, it isn’t bullet proof. Generics are a convenient way for you to tell TS you know what you’re doing.

On Thu, Aug 5, 2021 at 1:41 PM Ryan Florence @.***> wrote:

(If typescript let us type a module interface, then we could actually infer this all automatically … or maybe we can anyway but just haven’t met anybody who knows how?)

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/remix-run/remix/issues/236#issuecomment-893781427, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAWVJ7F3ZPGTPXJ5VXNKVDT3LZQVANCNFSM5BUS5JPQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email .

– – Michael