I came across the following two form designing approaches in react-hook-form documentation.

Connect Form ^ref

When we are building forms, there are times when our input lives inside of deeply nested component trees, and that's when FormContext comes in handy. However, we can further improve the Developer Experience by creating a ConnectForm component and leveraging React's renderProps. The benefit is you can connect your input with React Hook Form much easier.

 export const ConnectForm = ({ children }) => {
  const methods = useFormContext();

  return children({ ...methods });
 };

 export const DeepNest = () => (
   <ConnectForm>
     {({ register }) => <input {...register("deepNestedInput")} />}
   </ConnectForm>
 );

 export const App = () => {
   const methods = useForm();
 
   return (
     <FormProvider {...methods} >
       <form>
         <DeepNest />
       </form>
     </FormProvider>
   );
 }

Somehow, I am not able to get how this "improves developer experience"? Without ConnectForm, we would have required only two lines which are inside ConnectForm in above example. But with ConnectForm, we are requiring extra lines to define ConnectForm and two extra lines for <ConnectForm>','</ConnectForm>. So the number of lines have increased.

I guess I am not getting the idea from the above example, and maybe for a more complex or large form, it might result in a lesser number of lines. Q1. Is it so?

Q2. Or is it that the doc wants to say "<ConnectForm>...</ConnectForm> looks more elegant" by "improving Developer Experience"?