Remix Js/V2/Fetcher Submission Properties Flattening

Last update

Sep 3, 2024

Like useNavigation, useFetcher has flattened the submission and removed the type field.

Before

import { useFetcher } from '@remix-run/react';

function SomeComponent() {
  const fetcher = useFetcher();
  fetcher.submission.formData;
  fetcher.submission.formMethod;
  fetcher.submission.formAction;
  fetcher.type;
}

After

import { useFetcher } from '@remix-run/react';

function SomeComponent() {
  const fetcher = useFetcher();

  // these keys are flattened
  fetcher.formData;
  fetcher.formMethod;
  fetcher.formAction;

  // this key is removed
  fetcher.type;
}

Like useNavigation, useFetcher has flattened the submission and removed the type field.

Before

import { useFetcher } from '@remix-run/react';

function SomeComponent() {
  const fetcher = useFetcher();
  fetcher.submission.formData;
  fetcher.submission.formMethod;
  fetcher.submission.formAction;
  fetcher.type;
}

After

import { useFetcher } from '@remix-run/react';

function SomeComponent() {
  const fetcher = useFetcher();

  // these keys are flattened
  fetcher.formData;
  fetcher.formMethod;
  fetcher.formAction;

  // this key is removed
  fetcher.type;
}

Build custom codemods

Use AI-powered codemod studio and automate undifferentiated tasks for yourself, colleagues or the community

Get Started Now