Facing a strange issue with the latest stable releases of Nextjs and React, where state and view updates are out-of-sync.

Example (v1): using useMemo

import { useState, useMemo } from "react";

const items = [
  { id: 1, name: "apple" },
  { id: 2, name: "orange" },
  { id: 3, name: "mango" }
];

export default function IndexPage() {
  const [desc, setDesc] = useState(true);

  const sortedItems = useMemo(() => [...(desc ? items : items.reverse())], [
    desc
  ]);

  return (
    <div>
      <button onClick={() => setDesc((s) => !s)}>change order</button>
      <br />
      <span>desc: {desc.toString()}</span>
      <pre>{JSON.stringify(sortedItems, null, 2)}</pre>
    </div>
  );
}

Example (v2): using useState

import { useState, useMemo } from "react";

const items = [
  { id: 1, name: "apple" },
  { id: 2, name: "orange" },
  { id: 3, name: "mango" }
];

export default function IndexPage() {
  const [state, setState] = useState({ desc: true, items });

  function handleSort() {
    setState((s) =>
      s.desc
        ? { desc: false, items: [...items.reverse()] }
        : { desc: true, items: [...items] }
    );
  }

  return (
    <div>
      <button onClick={handleSort}>change order</button>
      <br />
      <span>desc: {state.desc.toString()}</span>
      <pre>{JSON.stringify(state.items, null, 2)}</pre>
    </div>
  );
}

Package versions:

"next": "12.1.6",
"react": "18.2.0",
"react-dom": "18.2.0",

As you can see from the output below, array elements are not updated on the view front based on the current sort state (in both the examples). Multiple clicks are required to do so.

Is this a random bug or am I fooling myself!?

CodeSandbox - Contains both code examples