Warum unterbricht React.StrictMode die Berechnung eines Unterschieds von Props/State?

function SchrödingersDiff()
{
 const [count, setCount] = useState(0);
 // simulate a changing state
 useEffect(() =>
 {
 const int = window.setInterval(() => setCount(s => s + 1), 1000);
 return () => window.clearInterval(int);
 }, []);
 const last = useRef(0);
 const diff = useMemo(() =>
 {
 const lastValue = last.current;
 last.current = count;
 const diff = count - lastValue;
 // console.log(diff);
 return diff;
 }, [count]);
 // console.log(diff);
 return diff;
}

Warum rendert diese Komponente immer "0", wenn sie unter ausgeführt wird <React.StrictMode>? Es funktioniert gut (dh rendert "1") ohne strikten Modus.

Ich weiß, dass der strikte Modus Dinge zweimal rendert, was es erklären würde, aber ich würde erwarten useMemo, das zu fangen - und das tut es: Das Protokoll in der Memo-Funktion gibt jede Sekunde die richtige "1" aus. Sogar der Draußen tut es.

Gibt es eine bessere Möglichkeit, diesen Unterschied zu berechnen?

Lösung des Problems

Sie können einen useDiffbenutzerdefinierten Hook definieren, der intern einen Status mit den aktuellen und den letzten Werten beibehält, sodass Sie beide wie folgt aus Ihrem setIntervalCallback aktualisieren können:

const useDiff = () => {
 const [state, setState] = useState({
 current: 0,
 last: 0,
 });
 useEffect(() => {
 const interval = window.setInterval(() => {
 setState((s) => ({ current: s.current + 1, last: s.current }));
 }, 1000);
 return () => window.clearInterval(interval);
 }, []);
 return state.current - state.last;
};

Demo: https://stackblitz.com/edit/react-akituv