useFormFields should not return dispatchFields

[tyteen4a03]

Currently, useFormFields can be used in one of two ways: It can either return fields via a selector, or return a dispatchFields function. You cannot make it return both at the same time via array destructuring.

  const theFieldYouWant = useFormFields(([fields,dispatch]) => (fields && fields?.theFieldYouWant) || null)
  const dispatchFields = useFormFields(([fields,dispatch]) => dispatch)
  
  // not a thing
  const [theFieldYouWant, dispatchFields] = useFormFields(([fields]) => (fields && fields?.theFieldYouWant) || null)

This muddles up the return value and the DX is suboptimal. I think useFormFields should stop returning dispatchFields and instead force the use of useForm or useWatchForm hooks.

[evelynhathaway]

You can return a tuple and type the tuple using the decorator. This seemed like the most logical way to return values and the dispatcher in Payload v2, the that type isn't exported in Payload v3.37.0. Possibly the type is intentionally private and they'll recommend a better approach, or maybe the type will get re-exported as part of #12356, which has an example of this in action except for the TypeScript type error.

I also see that at least one person has created their own function as a return value in a tuple in #5167 (comment), which avoids the need to import or recreate the dispatcher type... as long as your you type your function and your function isn't just the dispatcher.

[evelynhathaway]

The linked type export issue was fixed in v3.40.0, so you can more easily return and type the dispatcher.

import React, {useEffect} from "react";
import {useFormFields, type FieldAction} from "@payloadcms/ui";
export const MyField = () => {
	// Simplified to one field for readability, but imagine `useField()` was not an alternative
	// Pull the value (number or undefined) and expose the dispatcher to the component
	const [value, dispatch] = useFormFields<[number | undefined, React.Dispatch<FieldAction>]>(
		([fields, dispatch]) => [fields.myField?.value as number | undefined, dispatch]
	);

	// Call the dispatch with an update or anything else supported by `dispatch`'s type
	useEffect(() => {
		if (!value) {
			dispatch({
				type: "UPDATE",
				path: "myField",
				value: Math.random(),
			});
		}
	}, [dispatch, value]);

	// Render field UI, or not in this case
	return null;
}