title: MUI DatePicker - stop re-render when changing years
body: <p>I want to disable <code>onChange</code> when the user is switching from one year to another. The <code>DatePicker</code> updates a state variable, which is passed as a prop to another component. Right now, that component re-renders even when moving from year to year, before an actual date is selected by the user.</p>
  <p><a href="https://i.stack.imgur.com/M6odh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/M6odh.png" alt="enter image description here" /></a></p>
  <p>Current process:</p>
  <ol>
  <li>The current selected date is February 14, 2022</li>
  <li>User opens calendar, selects 2023</li>
  <li><code>DatePicker</code> immediately sets date to February 14, 2023 and re-renders the component</li>
  <li>User picks the actual date in 2023 they wanted, and re-renders the component again</li>
  </ol>
  <p>Can I remove #3 from the process? Maybe by overriding <a href="https://mui.com/api/date-picker/" rel="nofollow noreferrer"><code>onYearChange</code></a>?</p>
  <p><a href="https://i.stack.imgur.com/CnLiQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CnLiQ.png" alt="enter image description here" /></a></p>
  <p>I'm not entirely sure how to do this, since there's <code>onYearChange</code> and <code>onMonthChange</code>, but then only a general <code>onChange</code> rather than something like <code>onDayChange</code>. I tried something like passing a function that returns nothing/false, but I don't think that was the correct way since it seemed to do nothing.</p>
  <p>Below is my current code:</p>
  <pre><code>&lt;LocalizationProvider dateAdapter = {AdapterDateFns}&gt;
      &lt;DatePicker
          value = {value}
          shouldDisableDate = {(date) =&gt; disableDates(date)}
          onChange = {(v) =&gt; handleChange(v)}
          renderInput = {(params) =&gt; &lt;TextField {...params} /&gt;} /&gt;
  &lt;/LocalizationProvider&gt;
  </code></pre>