usePatchFormik.js

import { useCallback, useLayoutEffect, useRef } from "react";

/**
 * Returns a constant reference to a callback which can be safely added
 * to dependency arrays without triggering the effect or memoization.
 * Maintains an up to date copy of the provided function to avoid
 * referencing stale state/props at calltime.
 */
const useEventCallback(fn) {
	const ref = useRef(fn);

	// copy a ref to the callback scoped to the current state/props on each render
	useLayoutEffect(() => {
		ref.current = fn;
	});

	return useCallback((...args) => ref.current(...args), []);
}


/**
 * Simple utility over Formik's setValues.
 * Leverages setValues' callback to apply patch.
 * See: https://formik.org/docs/api/formik
 */
const usePatchValues = (form) => {
	const { setValues } = form;
	const patchValues = useCallback(
		(patch) => setValues((values) => ({ ...values, ...patch })),
		[setValues],
	);

	return { patchValues, ...form };
};


/**
 * Simple utility over Formik's setErrors.
 * Merges a 'patch' into errors object
 * See: https://formik.org/docs/api/formik
 */
const usePatchErrors = (form) => {
	const { setErrors, errors } = form;
	const patchErrors = useEventCallback((patch) => setErrors({ ...errors, ...patch }));

	return { patchErrors, ...form };
};