lowcarbcheck/openplate/form-persistence

import { useFormField } from '#app/hooks/use-form-field';
// Inside component:
const [value, setValue] = useFormField<string>(formId, 'fieldName', '');

import { useClearForm } from '#app/utils/form-storage';
const clearForm = useClearForm(formId);
// Call clearForm() on successful submission

import { Form, useNavigation } from 'react-router';
import { useFormField } from '#app/hooks/use-form-field';
import { useClearForm } from '#app/utils/form-storage';
import { useEffect, useRef } from 'react';
export default function CreateThing({ loaderData }: Route.ComponentProps) {
  const navigation = useNavigation();
  const isSubmitting = navigation.state === 'submitting';
  const [persistedName, setPersistedName] = useFormField('create-thing', 'name', '');
  const clearForm = useClearForm('create-thing');
  // Clear on successful redirect
  const prevState = useRef(navigation.state);
  useEffect(() => {
    if (navigation.state === 'loading' && navigation.formAction) {
      clearForm();
    }
    prevState.current = navigation.state;
  }, [navigation.state, navigation.formAction, clearForm]);
  return (
    <Form method="post">
      <input
        name="name"
        value={persistedName}
        onChange={(e) => setPersistedName(e.target.value)}
      />
    </Form>
  );
}

import { useFormField } from '#app/hooks/use-form-field';
import { useClearForm } from '#app/utils/form-storage';
// Persist non-sensitive fields
const [persistedName, setPersistedName] = useFormField('create-user', 'name', '');
const [persistedEmail, setPersistedEmail] = useFormField('create-user', 'email', '');
const clearForm = useClearForm('create-user');
// Pass as defaultValue
const [form, fields] = useForm({
  lastResult: fetcher.data as SubmissionResult<string[]> | undefined,
  onValidate({ formData }) {
    return parseWithZod(formData, { schema });
  },
  defaultValue: {
    name: persistedName,
    email: persistedEmail,
  },
});
// Use onChange on <Form> for event delegation (native inputs)
<fetcher.Form method="post" {...getFormProps(form)} onChange={(e) => {
  const target = e.target as HTMLInputElement;
  if (target.name === fields.name.name) setPersistedName(target.value);
  if (target.name === fields.email.name) setPersistedEmail(target.value);
}}>
// For Radix <Select> (portaled, doesn't bubble to form):
<Select onValueChange={setPersistedRole}>

const prevFetcherState = useRef(fetcher.state);
useEffect(() => {
  if (fetcher.state === 'loading' && prevFetcherState.current === 'submitting') {
    clearForm();
  }
  prevFetcherState.current = fetcher.state;
}, [fetcher.state, clearForm]);