59 lines
1.6 KiB
Markdown
59 lines
1.6 KiB
Markdown
---
|
|
title: Use useFormContext Sparingly for Deep Nesting
|
|
impact: MEDIUM
|
|
impactDescription: reduces prop drilling but increases implicit dependencies
|
|
tags: sub, useFormContext, FormProvider, prop-drilling
|
|
---
|
|
|
|
## Use useFormContext Sparingly for Deep Nesting
|
|
|
|
useFormContext eliminates prop drilling by accessing form methods via context, but creates implicit dependencies that are harder to track. Use it for deeply nested components; prefer explicit props for shallow nesting.
|
|
|
|
**Incorrect (useFormContext for shallow nesting):**
|
|
|
|
```typescript
|
|
function ContactForm() {
|
|
const methods = useForm()
|
|
|
|
return (
|
|
<FormProvider {...methods}>
|
|
<form onSubmit={methods.handleSubmit(onSubmit)}>
|
|
<NameInput /> {/* One level deep, context overhead not needed */}
|
|
<EmailInput />
|
|
</form>
|
|
</FormProvider>
|
|
)
|
|
}
|
|
|
|
function NameInput() {
|
|
const { register } = useFormContext() // Implicit dependency
|
|
return <input {...register('name')} />
|
|
}
|
|
```
|
|
|
|
**Correct (explicit props for shallow nesting):**
|
|
|
|
```typescript
|
|
function ContactForm() {
|
|
const { register, handleSubmit } = useForm()
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit(onSubmit)}>
|
|
<NameInput register={register} /> {/* Explicit dependency */}
|
|
<EmailInput register={register} />
|
|
</form>
|
|
)
|
|
}
|
|
|
|
function NameInput({ register }: { register: UseFormRegister<ContactFormData> }) {
|
|
return <input {...register('name')} />
|
|
}
|
|
```
|
|
|
|
**When to use useFormContext:**
|
|
- Components nested 3+ levels deep
|
|
- Shared components used across multiple forms
|
|
- Complex form sections with many fields
|
|
|
|
Reference: [useFormContext](https://react-hook-form.com/docs/useformcontext)
|