formContext question

[fabiendeborde]

Hello again! This is another question about form context! 😅

I use antdesign and custom made input that are deeply nested, so for simplification I am using the form context hook to access register. I set the form as written below:

<FormContext {...methods} >
  <form ...>
    <NestedtInput1 />
    <NestedtInput2 />
  </form>
</FormContext>

I am using the onBlur mode, and I can see a global rerender of the form on each blur event.
Furthermore, I have a huge form, with conditional rendering, and I can see a lot of rerenders when the input block is removed.
Is this an intended effect of the context API or am I missing something?
The form is quite big now, with some calculation based on input values, and so far I had no issues, but this conditional block of input makes the form rerender for each input removed and this gives a huge lag sensation.

Sorry if I missed something somewhere and hope you can help me!

[bluebill1049]

This is expected behavior. We are using React Context API underneath, for large form I would prefer to compose and pass props down then form context.

[fabiendeborde]

Thanks a lot for your answer!
I guess I'm going to have do some refactoring for this huge form then! 😱

[bluebill1049]

yea, try to compose your form, so you are not doing prop drilling too much.

[bluebill1049]

I would strongly recommend you watch this video before you start: https://www.youtube.com/watch?v=3XaXKiXtNjw

[fabiendeborde]

Thanks a lot for the video! It was really interesting!
The problem I'm facing is the form I am creating is quite huge, and I need to find the right balance between composition and inheritance... The app I am building has also a lot of small to medium forms, so having to pass register, control & errors to every input does not feel really DRY to me.
I really like how I can create a form wrapper, pass it the methods it needs, and then create my inputs using Context so when I use them as children of my forms I don't have to know where do they get their data from.
The really big downside is there is no way to check context before re-render and so the performance impact is quite big...

[chandu]

@bluebill1049 In case of composing the form with components and avoiding the formcontext, how would one pass the errors, formState etc to the nested components?

[Sheharyar566]

I think here's how you'd do it. Let's say i'm using variable form as...const form = useForm();, then to pass down the methods and properties provided by the useForm method, you can do this <ChildComponent { ...form } />