title: React Hook Form Too many re-renders. React limits the number of renders to prevent an infinite loop
body: <p>I am trying to watch a field called party. after selecting those fields list of products will need to be rendered. I'm using react hook form where I used watch hook to subscribe to change.</p>
  <pre><code>&lt;FormProvider {...methods}&gt;
     &lt;form onSubmit={handleSubmit(onSubmit)}&gt;
     &lt;Select
         ref={ref}
         options={partyOptions}
         value={partyOptions.find(
                (c) =&gt; c.value === value
         )}
         onChange={(val: any) =&gt; onChange(val.value)}
         name={name}
          /&gt;
         )}
        &lt;div className=&quot;card-body row&quot;&gt;
          &lt;ProductContext.Provider value={[product, setProduct]}&gt;
              &lt;ProductList partyId={partyId} /&gt;
          &lt;/ProductContext.Provider&gt;
        &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  <p>On productlist component, i passed partyId as props and try to access API according to the partyId</p>
  <pre><code>export function ProductList({ partyId }: { partyId: any }) {
  const { control } = useFormContext(); // retrieve all hook methods
  
  const [productOptions, setProductOptions] = useState([] as any);
  const productQuery = useQuery(&quot;products&quot;, () =&gt; searchProduct(partyId), {
      enabled: partyId !== undefined,
  });
  
  if (productQuery.isFetched) {
    setProductOptions(
      productQuery.data.data.map((d: any) =&gt; ({
       value: d.id,
       label: d.name,
     }))
    );
  }
  </code></pre>
  <p>I am getting <code>Too many re-renders. React limits the number of renders to prevent an infinite loop.</code> Is there any solution to not render multiple times?</p>