Enfrentando un problema extraño con las últimas versiones estables de Nextjs y React, donde las actualizaciones de estado y vista no están sincronizadas.

Ejemplo (v1): uso 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> ); }

Ejemplo (v2): usando 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> ); }

Versiones del paquete:

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

Como puede ver en el resultado a continuación, los elementos de la matriz no se actualizan en el frente de la vista según el estado de clasificación actual (en ambos ejemplos). Se requieren varios clics para hacerlo .

¿Es esto un error aleatorio o me estoy engañando a mí mismo?

CodeSandbox : contiene ambos ejemplos de código