feat(remix-react): add typeof action inference to useFetcher (#4392)

* Support `typeof action` in useFetcher generic type.

* add myself to the list of contributors

* Create witty-kiwis-flow.md

Co-authored-by: Pedro Cattori <pcattori@gmail.com>

.changeset/witty-kiwis-flow.md

@@ -0,0 +1,8 @@
+---
+"remix": patch
+"@remix-run/react": patch
+---
+
+Infer the type of the `.data` property of `useFetcher` from `loader` and `action` functions.
+Similarly to how you can write useLoaderData<typeof loader>. e.g. you can now write useFetcher<typeof action>, and fetcher.data will be inferred correctly.
+Previously, you had to write useFetcher<SerializeFrom<typeof action>>.

contributors.yml

@@ -295,6 +295,7 @@
 - michaeldebetaz
 - michaeldeboey
 - michaelfriedman
+- michaelhelvey
 - michaseel
 - mikeybinnswebdesign
 - mirzafaizan

packages/remix-react/components.tsx

@@ -1436,7 +1436,9 @@ export type FetcherWithComponents<TData> = Fetcher<TData> & {
  *
  * @see https://remix.run/api/remix#usefetcher
  */
-export function useFetcher<TData = any>(): FetcherWithComponents<TData> {
+export function useFetcher<TData = any>(): FetcherWithComponents<
+  SerializeFrom<TData>
+> {
   let { transitionManager } = useRemixEntryContext();
 
   let [key] = React.useState(() => String(++fetcherId));
@@ -1446,7 +1448,7 @@ export function useFetcher<TData = any>(): FetcherWithComponents<TData> {
   });
   let submit = useSubmitImpl(key);
 
-  let fetcher = transitionManager.getFetcher<TData>(key);
+  let fetcher = transitionManager.getFetcher<SerializeFrom<TData>>(key);
 
   let fetcherWithComponents = React.useMemo(
     () => ({