<p dir="auto">React version: 17.0.2</p>
<h2 dir="auto">Steps To Reproduce</h2>
<p dir="auto">The following minimal repro sample is used to indicate a props change in a component:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React from &quot;react&quot;;

export default function App() {
  const [a, setA] = React.useState(&quot;a&quot;);

  return (
    &lt;&gt;
      &lt;Test a={a} /&gt;
      &lt;button onClick={() =&gt; setA((oldA) =&gt; (oldA === &quot;a&quot; ? &quot;b&quot; : &quot;a&quot;))}&gt;
        Test
      &lt;/button&gt;
    &lt;/&gt;
  );
}

const Test = ({ a }) =&gt; {
  const oldRef = React.useRef(a);

  const hasChanged = oldRef.current !== a;
  if (hasChanged) {
    oldRef.current = a;
  }

  const changedText = hasChanged ? &quot;yes&quot; : &quot;no&quot;;
  console.log(&quot;Changed: &quot;, changedText);

  return (
    &lt;&gt;
      &lt;div&gt;{a}&lt;/div&gt;
      &lt;div&gt;Changed: {changedText}&lt;/div&gt;
    &lt;/&gt;
  );
};"><pre class="notranslate"><code class="notranslate">import React from "react";

export default function App() {
  const [a, setA] = React.useState("a");

  return (
    &lt;&gt;
      &lt;Test a={a} /&gt;
      &lt;button onClick={() =&gt; setA((oldA) =&gt; (oldA === "a" ? "b" : "a"))}&gt;
        Test
      &lt;/button&gt;
    &lt;/&gt;
  );
}

const Test = ({ a }) =&gt; {
  const oldRef = React.useRef(a);

  const hasChanged = oldRef.current !== a;
  if (hasChanged) {
    oldRef.current = a;
  }

  const changedText = hasChanged ? "yes" : "no";
  console.log("Changed: ", changedText);

  return (
    &lt;&gt;
      &lt;div&gt;{a}&lt;/div&gt;
      &lt;div&gt;Changed: {changedText}&lt;/div&gt;
    &lt;/&gt;
  );
};
</code></pre></div>
<p dir="auto">Clicking the "Test" button prints the value "Changed: yes" to the console, while React renders "no":<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/5010901/129494759-c7037df4-7e70-4761-8118-e9fd98f45c61.png"><img width="312" alt="yes_no_ref" src="https://user-images.githubusercontent.com/5010901/129494759-c7037df4-7e70-4761-8118-e9fd98f45c61.png" style="max-width: 100%;"></a></p>
<p dir="auto">Note: this works as expected if I remove the <code class="notranslate">&lt;StrictMode&gt;</code> wrapper in index.js.</p>

<p dir="auto">Link to code example: <a href="https://codesandbox.io/s/youthful-jang-2xw3i?file=/src/App.js" rel="nofollow">https://codesandbox.io/s/youthful-jang-2xw3i?file=/src/App.js</a></p>

<h2 dir="auto">The current behavior</h2>
<p dir="auto">"Changed: yes" in printed to console, but "Changed: no" is rendered by React.</p>
<h2 dir="auto">The expected behavior</h2>
<p dir="auto">"Changed: yes" in printed to console, "Changed: yes" is rendered by React.</p>
<p dir="auto">Hi, I know this issue has been discussed endlessly so I apologize for bringing it up again. I hope this issue is net helpful. <g-emoji class="g-emoji" alias="crossed_fingers" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f91e.png">🤞</g-emoji></p>
<p dir="auto">Quick summary: as of <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="596902061" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/18547" data-hovercard-type="pull_request" data-hovercard-url="/facebook/react/pull/18547/hovercard" href="https://github.com/facebook/react/pull/18547">#18547</a>, React 17 silences console logs during the second rendering pass in strict mode, in dev. It's a trade-off between the confusion of logging multiple times for a single render pass and the confusion of only logging once even though the code was actually called twice.</p>
<p dir="auto">Note that there's an outstanding PR to make it configurable (<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="687437949" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/19710" data-hovercard-type="pull_request" data-hovercard-url="/facebook/react/pull/19710/hovercard" href="https://github.com/facebook/react/pull/19710">#19710</a>) but it seems to be stalled awaiting review.</p>
<p dir="auto">Since the change was released, I've seen a number of issues in which folks have been confused by the behavior, e.g.:</p>
<ul dir="auto">
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="810480279" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/20835" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/20835/hovercard" href="https://github.com/facebook/react/issues/20835">#20835</a></li>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="829346736" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/20982" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/20982/hovercard" href="https://github.com/facebook/react/issues/20982">#20982</a></li>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="755011790" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/20367" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/20367/hovercard" href="https://github.com/facebook/react/issues/20367">#20367</a></li>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="728803156" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/20090" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/20090/hovercard" href="https://github.com/facebook/react/issues/20090">#20090</a></li>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="850373766" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/21178" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/21178/hovercard" href="https://github.com/facebook/react/issues/21178">#21178</a></li>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="843407104" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/21126" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/21126/hovercard" href="https://github.com/facebook/react/issues/21126">#21126</a></li>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="812466225" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/20851" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/20851/hovercard" href="https://github.com/facebook/react/issues/20851">#20851</a></li>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="783925678" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/20575" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/20575/hovercard" href="https://github.com/facebook/react/issues/20575">#20575</a></li>
</ul>
<p dir="auto">The response from the core team has generally been that, yes, this behavior can be confusing, but the previous behavior was equally if not more confusing. It's a trade-off without a clear answer. (Examples: <a href="https://github.com/facebook/react/issues/20090#issuecomment-715926549" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/20090/hovercard">1</a>, <a href="https://github.com/facebook/react/issues/20835#issuecomment-781393974" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/20835/hovercard">2</a>, <a href="https://github.com/facebook/react/issues/20367#issuecomment-737610144" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/20367/hovercard">3</a>.)</p>
<p dir="auto">I totally understand this perspective and I've tried to internalize it, but, frankly, the longer it's been since the release, the more it seems to me like the new behavior is actually just significantly more confusing for most people. My signal is:</p>
<ol dir="auto">
<li>Anecdotally, it's a recurring source of confusion within my company, much more so than the old behavior was. It's also probably the source of the most "oh, that's weird" reactions (vs. "oh, I get it now") when explained, compared with other React nuances.</li>
<li>The change was only released 8 months ago and there are already many GitHub issues expressing confusion about it, seemingly more than there ever were for the old behavior. (There used to be more instances where people weren't aware that strict mode double-invokes components, but it's not that the new behavior makes this any more clear, it just means that fewer people are now learning this fact, which doesn't seem good?) The rate of new issues also doesn't seem to be slowing as was <a href="https://github.com/facebook/react/issues/20367#issuecomment-737764279" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/20367/hovercard">hypothesized</a>.</li>
<li>The implementing PR (<a href="https://github.com/facebook/react/pull/18547" data-hovercard-type="pull_request" data-hovercard-url="/facebook/react/pull/18547/hovercard">#18547</a>) currently has 19 downvotes vs. 2 upvotes. Obviously people who dislike the change are more likely to downvote, but PRs are rarely this controversial and in fact this is the <a href="https://github.com/facebook/react/pulls?q=is%3Apr+sort%3Areactions--1-desc+is%3Aclosed">most downvoted non-docs PR</a> in the whole repo.</li>
</ol>
<p dir="auto">Altogether, the change was clearly well-reasoned and well-intentioned, but now that it's had some time to settle, what I'm asking is:</p>
<ol dir="auto">
<li>Does my perspective on the community reaction align with your perception?</li>
<li>Have you observed a different reaction internally at FB?</li>
<li>In aggregate, does any of this change your original perspective at all?</li>
</ol>
<p dir="auto">I hope this is a fair take and a helpful set of questions to ask. Thanks for taking the time to read.</p>
<hr>
<p dir="auto">(FWIW, if I had to guess, I'd propose that one reason for the new behavior being more confusing is that the old behavior is only confusing until you learn that strict mode = double render, whereas the new behavior continues to be confusing after you learn it because there are subtleties. e.g., "which pass gets silenced again?", "oh, right, it's the second one, so if you log a value and render it, the console might show something different than the screen", "what about when you set state in render?", "what about refs?", etc.)</p>