useEffect se llama justo después de que el componente se renderice. La primera vez que el componente renderiza prevCount no está undefined porque aún no se ha llamado a useEffect.

procesamiento previo: 1) value: 0, prevCount: undefined

post-render: useEffect se llama:

2) value: 0, prevCount: 0 useRef no provoca una nueva representación, por lo que el componente no se actualiza. refCount se mostrará como indefinido.

cuando cambia el valor de conteo, el componente se vuelve a renderizar:

renderizado previo:

3) value: 1, prevCount: 0 todavía no se ha llamado a useEffect.

posprocesamiento:

4) value: 1, prevCount: 1 se llama a useEffect, prevCount aumentó pero el componente no se actualiza, por lo que se mostrará prevCount con el valor = 0;

Puede usar componentDidUpdate para obtener los accesorios y el estado anteriores. Cuando extiendas React.Component, llamará a componentDidUpdate después de cada procesamiento. Tú defines la función y React te pasará los accesorios anteriores y el estado anterior.

https://reactjs.org/docs/react-component.html#componentdidupdate

Hay tres piezas aquí. Un estado , una referencia y un efecto .

Un estado es un valor que se recuerda entre renderizaciones y vuelve a renderizar su componente cuando se cambia.

Una referencia (o ref ) es un valor que persiste entre los renderizados como lo hace el estado, pero a diferencia del estado, no se observa ningún cambio y se puede mutar libremente. Los cambios en las referencias nunca causan renderizaciones.

Un efecto es simplemente una función que se ejecuta después de un renderizado, o después de que un renderizado en una de sus dependencias haya cambiado desde el renderizado anterior.

Así que juntando eso, esto es lo que sucede:

 const [count, setCount] = useState(0);

Aquí se declara un estado. Llamar a setCount con un nuevo valor hará que el componente se represente y, cuando lo haga, count tendrá el valor establecido.

 const prevCountRef = useRef();

Luego declara la ref. Esto mantendrá una referencia al valor de conteo anterior. En este momento no tiene valor ( undefined ), lo que tiene sentido teniendo en cuenta que no hay un valor previo cuando el componente se procesa por primera vez.

 useEffect(() => { prevCountRef.current = count; });

Ahora declara un efecto que se ejecuta después de cada procesamiento (puedes saberlo porque no tiene dependencias (sería el segundo argumento para useEffect() ). Cuando se ejecuta, establece el valor actual de prevCountRef en el valor que sea.

Entonces, en el primer render, en pseudocódigo:

 // render starts count // 0 prevCountRef.current // undefined // render finishes effect runs { prevCountRef.current is set to 0 }

Entonces, cuando se está procesando, el estado de count es 0 y la referencia de conteo anterior no está undefined .

Segundo render:

 setCount(1) // triggers the second render // second render starts count // 1 prevCount.current // 0 // second render finishes effect runs { prevCount.current is set to 1 }

Entonces, como puede ver, durante el renderizado, siempre tiene el recuento actual como estado y el recuento anterior como referencia. Esto funciona porque el efecto que establece el valor de refs siempre se ejecuta después de que se realiza el renderizado, lo que permite que sea el valor anterior.