Module Hook/Fetcher Type

Derive the value of the deprecated fetcher.type from the fetcher and navigation data.

import { getFetcherType } from "remix-utils/fetcher-type";

function Component() {
	let fetcher = useFetcher();
	let navigation = useNavigation();
	let fetcherType = getFetcherType(fetcher, navigation);
	useEffect(() => {
		if (fetcherType === "done") {
			// do something once the fetcher is done submitting the data
		}
	}, [fetcherType]);
}
Copy

You can also use the React Hook API which let's you avoid calling useNavigation.

import { useFetcherType } from "remix-utils/fetcher-type";

function Component() {
	let fetcher = useFetcher();
	let fetcherType = useFetcherType(fetcher);
	useEffect(() => {
		if (fetcherType === "done") {
			// do something once the fetcher is done submitting the data
		}
	}, [fetcherType]);
}
Copy

If you need to pass the fetcher type around, you can also import FetcherType type.

import { type FetcherType } from "remix-utils/fetcher-type";

function useCallbackOnDone(type: FetcherType, cb) {
	useEffect(() => {
		if (type === "done") cb();
	}, [type, cb]);
}
Copy