Handling hooks that use jsx so HMR doesn't break

[ic-768]

I have a bunch of hooks that handle logic behind rendering tables.

For example:

export const useAnimalTable = ({
  onRowClick,,
}: UseAnimalTableArgs) => {
  const { t } = useTranslation();
  const { isRegionalAdmin } = useCurrentUser();
  const queryClient = useQueryClient();

  const [animalFilter, setAnimalFilter] = useState<string>();


  const columns: ColumnDef<AnimalTableData, any>[] = [
    {
      accessorKey: "animal",
      enableSorting: true,
      header: (c) => (
        <SortableHeader label={t("animal")} column={c}>
          <Filter
            inputName="animal"
            value={animalFilter}
            setValue={onChangeAnimalFilter}
            ref={animalRef}
          />
        </SortableHeader>
      ),
    },
    //... more stuff down here}

And this returns the columns along with a bunch of functions also declared in the hook.

I use a .tsx file extension for this file to get proper syntax highlighting but also because using a .ts extension causes all sorts of errors to pop out because the components and the jsx aren't recognised. But this causes the hmr invalidate warning for consistent components exports.

What is the correct way to handle this so that HMR works properly?

[ArnaudBarre]

Yeah I think this is a case that the plugin doesn't handle well for now, you can open an issue for this