Bug: Value printed to console is rendered incorrectly in StrictMode

[Yakimych]

React version: 17.0.2

Steps To Reproduce

The following minimal repro sample is used to indicate a props change in a component:

import React from "react";

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

  return (
    <>
      <Test a={a} />
      <button onClick={() => setA((oldA) => (oldA === "a" ? "b" : "a"))}>
        Test
      </button>
    </>
  );
}

const Test = ({ a }) => {
  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 (
    <>
      <div>{a}</div>
      <div>Changed: {changedText}</div>
    </>
  );
};

Clicking the "Test" button prints the value "Changed: yes" to the console, while React renders "no":

Note: this works as expected if I remove the <StrictMode> wrapper in index.js.

Link to code example: https://codesandbox.io/s/youthful-jang-2xw3i?file=/src/App.js

The current behavior

"Changed: yes" in printed to console, but "Changed: no" is rendered by React.

The expected behavior

"Changed: yes" in printed to console, "Changed: yes" is rendered by React.

[bvaughn]

Closing this as a duplicate of #21783. See #21889 for new our new plans here (already implemented as PR #22030)

[aminick]

Thanks for reporting, this thread has saved my sanity.