Granular form state subscriptions built on subscribe

[Khalzy]

Built a small library rhf-granular on top of subscribe.

useWatch has compute for derived field values. rhf-granular is complementary rather than a replacement.

useFormEffect

Run side effects on form state changes without affecting the render cycle. No need for useEffect + useWatch.

useFormSelector

compute works only with field values, while useFormSelector can access values, errors, isSubmitting, and other meta together.

useFormEffect(control, ({ values, isDirty }) => {
  if (values.plan === 'enterprise' && isDirty) trackEvent('enterprise_plan_edited')
})

// Two independent subscriptions with compute — re-renders when either changes
const { formState: { isDirty, isValid } } = useFormContext()
const isEnterprise = useWatch({ control, name: 'plan', compute: p => p === 'enterprise' })

// One selector, only re-renders if showWarning changes
const showWarning = useFormSelector(control, s =>
  s.values.plan === 'enterprise' && s.isDirty && !s.isValid
)

Links

• npm
• GitHub