title: React.js: How to prevent wasted renders when inserting a new form field on the page
body: <p>I have a form with a couple of conditionally rendered fields. The form is made up of MUI components, react-hook-form and yup for its validation.</p>
  <p>Additionally, I have added a <code>console.log()</code> within the <code>AutocompleteCoffee</code>, <code>RadioBtnGroup</code>,  <code>TxtField</code> components that will execute every time the components are rendered.</p>
  <p><strong>Scenario</strong></p>
  <p>When the page loads you can see a log from each component. Nothing new here.</p>
  <p>When you select &quot;Yes&quot; from,  Do you like coffee? a new field will be rendered. This action triggers a rerender of all the components on the page.</p>
  <p>I am using the <code>watch</code> method from react-hook-form to keep track of the question mentioned above.</p>
  <pre><code>const coffee = watch(&quot;coffee&quot;, &quot;No&quot;);
  ...
  {coffee === &quot;Yes&quot; ? (
            &lt;AutocompleteCoffee
              required
              fullWidth
              name=&quot;coffeType&quot;
              label=&quot;Which coffee type&quot;
              control={control}
              options={coffeList}
              error={!!errors.coffeType}
              helperText={errors?.coffeType?.message}
            /&gt;
          ) : null}
  ...
  </code></pre>
  <p>You can see the working <a href="https://codesandbox.io/s/testing-rerenders-2t102s?file=/src/components/MainForm.js" rel="nofollow noreferrer">CodeSandbox here</a>.</p>
  <p><strong>Question</strong></p>
  <p>I was wondering how to prevent all the wasted renders. Any ideas?</p>
  <p>Thank you in advance!</p>